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:
.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="https://www.youtube.com/embed/4UMYsL8dsBg?si=oK2DH63SnlzEKGqv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>