Responsive YouTube video embed, how do I make it so it doesn't take up the total width on desktop

[Project_ATLAS]

I know there's a lot of posts on this already, but I have read them all, and none seem to quite get it right...

I am trying to embed a responsive YouTube video which I have done. On mobile it takes up the full-width and looks good, however on the desktop version it does the same and this makes it MASSIVE.

How can I fix this.

Current code:

P.S. I am inserting this inside of the Shopify custom liquid field.

<div style="padding-bottom: 56.25%; max-width: 100%; position: relative;"><iframe src="https://www.youtube.com/embed/6iG5t4rf37c?rel=0&controls=0" width="560" height="315" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" frameborder="0"></iframe></div>

Thank you in advance for your help.

I have tried all kinds of different generators, as well as adding another div around it and trying to adjust the padding etc. but I couldn't seem to get that to work (I am no wed developer).

[dannyelo]

Hey, please share the website url.

[3rdDay]

Hi, I see you got no response. I'm looking for help for this also please. On my blog post (at the bottom of the page), the video is responsive but not at the same width as the blog images. Would you be able to provide me with a code that displays the YouTube video at the same width as the image, whilst maintaining a 16:9 ratio for the video?

The code I used for the YouTube video embed is:

<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>

Thanks!

[dannyelo]

Hey, you need to add css on two elements.

.embed-container {
  min-width: 100%;
  min-height: 100%;
}

The other style you need to add is to the parent element, but it has not a unique class that you can select via css.

The CSS you need to add to that element is this one:

.some-class-you-like {
  aspect-ratio: 16 / 9;
}

Hope this helps.

Final result: 

[dannyelo]

I got the final answer, you don't need to add any class. Forget about the other response I gave you.

Just copy paste this css code:

.embed-container {
  min-width: 100%;
  min-height: 100%;
}

[data-mce-fragment="1"]:has(> .embed-container) {
  aspect-ratio: 16 / 9;
}

Good luck!

[3rdDay]

Woohoo! It works 🙂

It’s so nice to apply that code to my blog posts template, meaning it’ll automatically make every video I embed in future blog posts responsive.

Thanks a lot.

[dannyelo]

Glad it worked!

Enjoy the rest of your day!

[yari_ua]

Hi Dannyelo,

thanks for your solution! I had the same issue and it almost worked for me, player width now is the same as the blog text container and its responsive on both pc and mobile, but the height is smaller and so the aspect ratio of the player is not 16:9 and you can see black borders on the sides if you play video not in full screen (blog post ). 

I'm using Craft theme and here is the code I put in base.css:

.embed-container {
min-width: 100%;
min-height: 100%;
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;
} }

[data-mce-fragment="1"]:has(> .embed-container) {
aspect-ratio: 16 / 9;
}

Also I wrapped youtube embed code in <div>:

<div class="embed-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/-4qwsNNO6PU?si=NwpRDx-8aP1LPo4N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

Any idea how to fix this and make it 16:9?

Thanks in advance

[dannyelo]

Hello!

Send me the url and I will try my best.

[dannyelo]

Oh I see, if you change the aspect ratio to 7 / 3.95, should adapt to your video aspect ratio.

[data-mce-fragment="1"]:has(> .embed-container) {
aspect-ratio: 7 / 3.95;
}

How this works for you!

[yari_ua]

It doesn't work, unfortunately 😞