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

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

Project_ATLAS
Tourist
30 0 2

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

Replies 6 (6)

dannyelo
Shopify Partner
184 37 37

Hey, please share the website url.

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
3rdDay
Excursionist
21 1 2

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!

Asa (3rd Day)
3rdday.co.uk
dannyelo
Shopify Partner
184 37 37

 

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

 

dannyelo_1-1718665803373.png

 

Hope this helps.

 

Final result: 

 

dannyelo_0-1718665676604.png

 

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
dannyelo
Shopify Partner
184 37 37

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!

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
3rdDay
Excursionist
21 1 2

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.

Asa (3rd Day)
3rdday.co.uk
dannyelo
Shopify Partner
184 37 37

Glad it worked!

Enjoy the rest of your day!

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here