Shopify Insights
Solving YouTube's Embed Issue: Making Videos Fit Any Screen
In the world of web design, providing a seamless user experience on all devices is crucial. However, a common problem arises with non-responsive video embeds from platforms like YouTube. These fixed-size embeds don't adjust to different screen sizes, causing issues on both desktop and mobile.
On desktop screens, the video doesn't fill the available space, leaving empty areas around it.
![](https://cdn.shopify.com/s/files/1/0599/3182/0198/files/desktop-issue_935x.jpg?v=1715888962)
Meanwhile, on mobile screens, the fixed height of the video creates dimension issues, resulting in a nearly square-shaped video display with unnecessary black spaces surrounding it.
![](https://cdn.shopify.com/s/files/1/0599/3182/0198/files/mobile-issue_935x.jpg?v=1715804122)
To fix this, we use CSS adjustments to make videos adapt to their container's width. This ensures a smooth viewing experience across devices, without overflow or aspect ratio problems.
To apply this to your embed try these steps:
1. Wrap the iframe
To wrap the iframe, place <div class="responsive-container"> tag before the <iframe> tag, and the closing </div> after the </iframe>. So it would be something like this: <div class="responsive-container"><iframe></iframe></div>
2. Add the CSS
Add the following code:
<style>
.responsive-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
This code can be added after the closing. You can also use this single line code:
<style>.responsive-container {position:relative;width:100%;padding-bottom:56.25%;height:0;}.responsive-container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}</style>
Results
When implementing this code to make videos responsive, you'll notice significant improvements in how your content is displayed across different devices.
Desktop:
On desktop screens, the video now seamlessly fills the available space, eliminating empty areas and creating a more visually appealing layout.
![](https://cdn.shopify.com/s/files/1/0599/3182/0198/files/desktop-issue-fixed_935x.jpg?v=1715804168)
Mobile:
Similarly, on mobile screens, the video now adjusts its dimensions properly, eliminating the square-shaped display and unnecessary black spaces, resulting in a cleaner and more engaging viewing experience
![](https://cdn.shopify.com/s/files/1/0599/3182/0198/files/mobile-issue-fixed_935x.jpg?v=1715804188)
Conclusion
By making videos responsive, Shopify store owners and web designers can provide a better online experience for their audience. With videos that fit any screen, you can engage customers effectively and showcase your products or content seamlessly.