Responsive youtube embed with max size

[nagumi]

Hi!

I need to create a responsive youtube embed (16:9) that will fill 100% of the frame on smaller screens, but no more than 560px width on larger screens. In other words, I need it to be responsive, but with a max size of 560px (and a proportional height at 16:9).

I've been fiddling with CSS for hours and have run out of patience. Any ideas? Thanks!

[nagumi · Accepted solution]

In case anyone cares, I figured it out. Here's the code:

<style><!--
.embed-container { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; max-width: 560px; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media only screen and (min-width: 749px) { .embed-container { padding-bottom: 315px !important; } }
--></style>
<div class="embed-container"><iframe src="https://www.youtube.com/embed/YOUTUBEVIDEO" frameborder="0" allowfullscreen=""></iframe></div>

 You can add "?loop=0&autoplay=1&mute=1" after the youtube video link to make it autoplay on mute (autoplay with sound does not work on mobile devices). 

[rexarcum]

Hi Nagumi, you're a life saver with this thank you so much! I'm trying to get the embedded video to also be aligned in the centre (of this page). Can you please tell me what I could add or change to this code to make that the case? By default in seems to align with the left wall of the text box.

Would really appreciate the help 

[nagumi]

It looks like you managed?

[KetanKumar]

@nagumi 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.