Check out the Youtube channel

Easy Responsive Video Embed in Shopify Themes

Written by Eduard Fastovski

Aug 07, 2022

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.


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

Add this into your product description, blog post, or page in between 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.

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="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Want posts like this in your inbox? Subscribe to the newsletter.