Easy Responsive Video Embed in Shopify Themes

Is your embedded Youtube video too wide and being cut off on mobile and smaller screens? This is a common issue in many themes, especially Dawn and the free Shopify 2.0 themes.

Luckily there is an easy way to fix this with just 3 lines of CSS.

After this fix, the result is that any Youtube video you embed to your store will be a fully responsive video. And you can use this inside the product description, your blog posts, and pages.

THE CSS:

Add this into your product description, blog post, or page in between <style> </style> tags.

Or create a separate css file like custom.css and then include it in theme.liquid. Then you don’t need the style tags.

.responsive-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

From now on, when you embed a youtube iframe, just add the responsive-video class to it:

<iframe class="responsive-video" width="560" height="315" src="<https://www.youtube.com/embed/ZabAPhin3Bs>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>