How To Make a Responsive 100% Width YouTube iFrame Embed
Aug 12, 2014Web DevelopmentComments (142)
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
And use the following CSS:
How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
Here is the result:
You can also use media query breakpoints to resize an iframe to specific sizes. It can be a more cumbersome solution, but does avoid the need for a container element.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
Here is the result:
Alternative Using Media Queries
You can also use media query breakpoints to resize an iframe to specific sizes. It can be a more cumbersome solution, but does avoid the need for a container element.
Thank you! I looked at literally all the solutions and yours is the best * 2024 *
Thank you for this sample. This worked great for me using NextJs app, rendering in Brave Browser!
@Keith, I pray you, that was simply awesome.
CSS aspect-ratio currently has about 90% compatibility for usage market share. So it's getting close. I'd still recommend the more compatible version for now, but hopefully not too much longer.
Why not just use the CSS aspect ratio setting? For example, like so: <iframe width='100%' style='aspect-ratio:16/9' src='https://www.youtube.com/embed/myvideolink'></iframe>
Nick, you're a Godsend. This worked flawlessly and was so quick n' effortless -- I didn't even have to engage my brain :-D. Appreciate it much!
life hack. Very simple and surprising
Just what I was looking for! Thanks!
Thanks a lot! Just what I needed
This works like a charm thx!!!
This worked great. Thank you!
Thank you. I used this on my Squarespace 7.1 site and it worked perfectly with YouTube videos. However, it made my footer disappear and made the padding on my mobile menu go crazy. I think the 'container' command must have confused things. Does anyone know if there's an easy fix for this? Thanks
Thank You so much!! It works well!!
Perfection! Thanks so much!
I'm curious if this can be adjusted to work with vertical videos. Thanks!!!
Thank You. It works well!
Thank you so much, this works perfectly on my blogger account blog, when viewed from laptops and desktops. However, mobile version (any mobile browser including FB browser) is still reducing it to around 70% width, and I can't find the CSS source for mobile version in my template. :(
Thanks
This works perfectly using the old Intenet Explorer, but it does NOT work with Firefox nor Chrome. I have no idea why?
Thanks!
@ Matthew Chapdelaine Yes. 1. Go to HTML 2. Make a <div class="container"> [youtube iframe here] </div> 3. Remove width/height settings from the iframe 4. Open another blogger/editor tab, go to Theme. Click 'Customize' and then 'Advanced'. Scroll down the left menu (with fonts, colors and such). 5. Click on 'add CSS' and enter the code as printed here. Make sure the class names are correct. 6. Apply to blog, preview post. In Firefox, hit F12 (developer mode), click the small smartphone/tablet icon on the right. Try a few presets, the video should adjust to the selected view port.
Struggled with responsive YT embedding in Blogger, but this immediately worked. Thanks!
Works great! Thanks!
Thanks dude you're a lifesaver
Thankyou. You are great
Excellent. Thank you soo much for the awesome tricks
confirmed. this still works on July 2020. thank you
@Graham and @Alena, How do you use the css code exactly? Thank you Howie
Exactly what I needed. Thank you!!!
@Alena THANK YOU! That little snippet of code is exactly what I was looking for to make YouTube videos fit onto my web page proportionately! Literally all I needed to do was to cut the part that said width="560" height="315" from the YouTube iframe embed code and put your code in place and, lo and behold, the YouTube video embeds neatly into my page :-)
there is even fucking better way just put in css this: video { /* override other styles to make responsive */ width: 100% !important; height: auto !important; }
Awesome, finally a hack that works even after years :D
Thank you!
Worked for me, thanks dude!
Clever! Thanks!
Thank you this was quick and easy!
Thanks so much! Helped me out!
Hiya, thanks for this - I used this on my blog (blogger) and it worked brilliantly after I renamed the styles to YTcontainer and YTvideo (as the style names above clashed with ones used in my template) Also, for anyone else using blogger, you can add the custom css in Themes > Advanced. Thanks again!
Fantastic. Easily the best solution I've found. Thanks
works!
Dude it worked! Nice, thanks a bunch bud
Brilliant! cheers dude
Great work, Thanks Man
Thanks man, saved my life tonight!
Can I do this in Blogger?
Thank you for this guide. It works well :)
You nailed it. It worked. Thanks for this guide.
Stephen Woolston - Do you have the height and width set in the youtube embed? Try removing those if you do
How come it's working for everyone else and not for me? I copied exactly this and my video is a fixed small size, not filling the width of the screen at all.
A perfect fix!
Love it! This has fixed a problem I have had on my site for a while. Of course the page builders can do it but I was struggling to fix my Guttenberg and Classic Editor posts. I did struggle for a while with empty YouTube video boxes. Until I realised the YouTube video source link has to be the Embed version. For those having the same struggle go to YouTube. Click on Embed for your YouTube video of choice and copy and paste the YouTube source link from there. I included the https bit. (I hope this answers the question from the commentator below) And it worked perfectly.
Excellent!
Thank you very much :)
Good stuff
Thank you. Nice logic.
Thank you very much, awesome trick!
Thanks bro worked great on Wordpress
Ah this is genius, and indeed responsive. Then put the entire combination in a 3rd DIV, and that outermost DIV becomes easy to style pretty much endlessly (smaller width, centered, float left or right, etc) without losing the aspect ratio. Its not something In need often so the extra classes and wrappers are not a big deal. THANKS!!! Now if only I could set an onclick event on the iframe itself or one of its surrounding DIVs. But that doesn't seem possible so far.
In case it's running on an http site. It uses whatever the host site is using essentially.
I'm curious, why is the video source formatted like this "//www.youtube.com/embed/..."? Why was https: eliminated?
Thank you! That's i needed for my blog.
Great stuff. Pasted the code in and ready to go.
Awesome, but how can I change width of embedded iframe and center it horizontally
Working nicely for copy / paste code. I already had a container and really didn't want to have to account for all the media query sizes. Thank you very much!
Amazing! Works very well. Thank you!
Thanks, simple and worked perfect.
thanks very much man
I Simply inspected your page source,found the <i frame> text & copied & replaced the url.. Very easy & helpful thanks....
Thank you!
Works flawlessly! I'm currently rebuilding my website and used this technique in the video gallery grid view. Turns out it also works great with images, so I used it in the photo gallery as well! Thanks! :)
Worked Fine Thanks Bro
awesome! This was a huge help thanks!!
wow! like
Thanks a bunch, this method just works flawlessly! =)
Saved my nerves, thanks!
Thanks a ton buddy. You saved my day. V
Lovely <3
ermfg you just made that whole ordeal a 30 sec process. THANK YOU!!! so much <3
WOW, love you!! :D THANKS
thanks munna bhai
Great stuff thanks for sharing helped me out.
Thank you...
Thank you! This was EXACTLY what I needed.
This is quite brilliant. I used it as custom CSS in a Wordpress theme, just changed the class names to ytcontainer and ytvideo so they were unique, and presto: completely responsive youtube video embed. Thanks a lot!
how would one go about doing this using inline css???
Thank you a lot! You solved a big problem for me ...
Great one! I never think of this. Thank you so much for saving my time.
Great job! I was looking for this solution a long time. You saved my day as well. Thank you so much!
Thank you so much! It worked perfectly, you saved my day! xxxx
Works perfectly, thanks for sharing.
Thanks, that helped me
Thank you, I have been looking for this for a long time :)
Thank you - this works perfect!
Thank you, it's easy :)
How do you add autoplay to this code?
Thank you, that solved my problem :-)
Clean and simple! Thank you! :)
Thank you! It's a simple and great solution.
good stuff, short, simple n perfect.
Great solution - thanks.
Thank you! This is the best working solution I found, so simple that I cannot believe I didn't saw that possibility
Thanks
Cool! You saved my evening and the crappy wordpress template that I have to use... ;)
Great. Thank you. Fits perfect
This shows the video in 100 of actual size in normal window ( without Re-sizing Screen ) How do I show the video in smaller size, say width="560" height="315" size in normal ? When I resize Screen, video gets smaller with screen size but in normal mode, I want to show the video in smaller than actual size like width="560" height="315" Please let me know ? Thanks. Neelam www.WatchOutOnNet.com
Brilliant and elegant solution! Thank you!
thanks man
Wow. This works for my need :). Thanks for sharing. Buy the way your blog design is so impressive, neat and clean. All the best...
Thank you.
You're a legend. Thanks!
Very useful! Thanks!
Cool trick! Thanks :)
Lee Fairclough Fancy seeing you here!
Perfect. Thanks!
Thanks Nick! An uncomplicated bit of code that works, what a joy!
Very usefull, tnx!
Very usefull, tnx
Thanks for the tutorial,, I serach many tricks on google but only this work for me.. thank you sir..
Pretty cool trick with the padding, didnt know that. Thanks a lot.
thanks to you. really help.
Thanks a lot! This even worked in my WordPress theme. After searching how to set the video pane height as a , your solution worked perfectly.
Worked like a charm bro, much appreciated. Still works in Wordpress 4.5.1
Awesome !! Very thanks :D
Thank you ...
Thank you very much!!
Just use width: 100
You'll need to adjust the padding-bottom of your container to suit your individual implementation.
Thanks!! Works perfectly
Wow, works superb. Thank you so much for sharing!
Please go here know the abc of iframe http://www.patroblogger.blogspot.com/2015/09/adjust-width-height-of-iframe.html
awesome bro! thanks!
awesome bro! thanks!
Brilliant!
very cool fix! in my use it work well the first time page containing the video loads. subsequent loads and it's thumbnial size. i can go full screen at that point and when i escape out it fills the original div. any idea why this would happen?
Super
Good catch. I'll make some edits. YouTube used to take up some vertical room with the track bar, which made 60 a good balance. But they did away with that recently.
if you want 16:9 use padding-bottom: 56.25;
yet your demonstration video still has black bars at top and bottom. why?
Awesome tip, thank you so much!
Thanks!! Works perfectly and is elementary
Thanks! Though, putting height and width in the iframe with percentages doesn't validate. You can put it in the CSS instead, together with the position, top and left. "In HTML 4.01, the width could be defined in pixels or in of the containing element. In HTML5, the value must be in pixels."
Thanks so much! saved the day..