How To Make a Responsive 100% Width YouTube iFrame Embed
Aug 12, 2014Web DevelopmentComments (143)
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:

<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.
Comments (143)
Add a Comment
Adi   May 22, 2024
Thank you so much!
Jay Ballenger   Dec 07, 2023
Thank you! I looked at literally all the solutions and yours is the best * 2024 *
Patrick   Oct 03, 2023
Thank you for this sample. This worked great for me using NextJs app, rendering in Brave Browser!
Miguel   Sep 12, 2023
@Keith, I pray you, that was simply awesome.
Nick   May 31, 2023
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.
Keith   May 31, 2023
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>
J-M Scanlon   Oct 07, 2022
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!
sanz   Aug 29, 2022
life hack. Very simple and surprising
Mark   Aug 23, 2022
Just what I was looking for! Thanks!
befu   May 13, 2022
Thanks a lot! Just what I needed
Gonzalo   Dec 23, 2021
This works like a charm thx!!!
Ryan   Dec 20, 2021
This worked great. Thank you!
Gabriel   Dec 03, 2021
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
Maria   Oct 14, 2021
Thank You so much!! It works well!!
Amelia   Jun 29, 2021
Perfection! Thanks so much!
Jen   May 27, 2021
I'm curious if this can be adjusted to work with vertical videos. Thanks!!!
Yohanes   Mar 30, 2021
Thank You. It works well!
Mizohican   Dec 04, 2020
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. :(
Muneeb   Oct 31, 2020
Thanks
Mike   Oct 28, 2020
This works perfectly using the old Intenet Explorer, but it does NOT work with Firefox nor Chrome. I have no idea why?
Dividend   Sep 24, 2020
Thanks!
ET   Sep 07, 2020
@ 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.
ET   Sep 07, 2020
Struggled with responsive YT embedding in Blogger, but this immediately worked. Thanks!
Vladyslav   Sep 04, 2020
Works great! Thanks!
Samir Tendulkar   Aug 09, 2020
Thanks dude you're a lifesaver
GH THAILAND   Aug 01, 2020
Thankyou. You are great
Qky   Jul 17, 2020
Excellent. Thank you soo much for the awesome tricks
John   Jul 13, 2020
confirmed. this still works on July 2020. thank you
Howie   Jun 09, 2020
@Graham and @Alena, How do you use the css code exactly? Thank you Howie
Linda   May 14, 2020
Exactly what I needed. Thank you!!!
Graham   May 03, 2020
@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 :-)
Alena   Apr 26, 2020
there is even fucking better way just put in css this: video { /* override other styles to make responsive */ width: 100% !important; height: auto !important; }
tech supp   Apr 13, 2020
Awesome, finally a hack that works even after years :D
Simon   Apr 06, 2020
Thank you!
Eddie   Apr 01, 2020
Worked for me, thanks dude!
Phil   Mar 31, 2020
Clever! Thanks!
Ben   Mar 29, 2020
Thank you this was quick and easy!
Jo   Mar 20, 2020
Thanks so much! Helped me out!
Chris Kempt   Mar 04, 2020
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!
Jonathan   Feb 27, 2020
Fantastic. Easily the best solution I've found. Thanks
Sam   Feb 24, 2020
works!
Ant   Feb 08, 2020
Dude it worked! Nice, thanks a bunch bud
Kev   Jan 30, 2020
Brilliant! cheers dude
Vipin   Jan 30, 2020
Great work, Thanks Man
Tillmann   Jan 29, 2020
Thanks man, saved my life tonight!
Matthew Chapdelaine   Dec 16, 2019
Can I do this in Blogger?
Bernd   Dec 04, 2019
Thank you for this guide. It works well :)
Olalekan   Nov 16, 2019
You nailed it. It worked. Thanks for this guide.
Stu   Oct 18, 2019
Stephen Woolston - Do you have the height and width set in the youtube embed? Try removing those if you do
Stephen Woolston   Sep 29, 2019
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.
Darlo   Sep 21, 2019
A perfect fix!
Paul Gregory   Aug 04, 2019
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.
Marcel   Aug 01, 2019
Excellent!
sanjit dey   Jul 04, 2019
Thank you very much :)
Barry   Jun 05, 2019
Good stuff
srinivas   May 13, 2019
Thank you. Nice logic.
Armin   Apr 19, 2019
Thank you very much, awesome trick!
Nuffe   Apr 05, 2019
Thanks bro worked great on Wordpress
PeterPan   Mar 26, 2019
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.
Nick   Mar 10, 2019
In case it's running on an http site. It uses whatever the host site is using essentially.
Dorian   Mar 10, 2019
I'm curious, why is the video source formatted like this "//www.youtube.com/embed/..."? Why was https: eliminated?
Mr   Mar 08, 2019
Thank you! That's i needed for my blog.
Kevin   Mar 05, 2019
Great stuff. Pasted the code in and ready to go.
Michal   Jan 14, 2019
Awesome, but how can I change width of embedded iframe and center it horizontally
Thuan Nguyen   Jan 10, 2019
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!
Alinda   Jan 09, 2019
Amazing! Works very well. Thank you!
DJ-Design.ca   Jan 02, 2019
Thanks, simple and worked perfect.
ova animations   Dec 29, 2018
thanks very much man
Kuldeep   Nov 16, 2018
I Simply inspected your page source,found the <i frame> text & copied & replaced the url.. Very easy & helpful thanks....
sreebala   Nov 13, 2018
Thank you!
Abijah Gupta   Nov 07, 2018
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! :)
Daniel Mwamasika   Nov 06, 2018
Worked Fine Thanks Bro
mjgila1c   Nov 04, 2018
awesome! This was a huge help thanks!!
dongocphu   Oct 19, 2018
wow! like
Gábor   Oct 17, 2018
Thanks a bunch, this method just works flawlessly! =)
Anonymouse   Oct 04, 2018
Saved my nerves, thanks!
Hardcoder   Sep 18, 2018
Thanks a ton buddy. You saved my day. V
Thomas der Sparkojote   Aug 23, 2018
Lovely <3
Jess   Aug 21, 2018
ermfg you just made that whole ordeal a 30 sec process. THANK YOU!!! so much <3
Viktor   Jul 30, 2018
WOW, love you!! :D THANKS
circuit   Jul 14, 2018
thanks munna bhai
Ragnor_of_London   Jul 11, 2018
Great stuff thanks for sharing helped me out.
Varakumar   Jun 20, 2018
Thank you...
Ryan   Jun 18, 2018
Thank you! This was EXACTLY what I needed.
Freek   Jun 15, 2018
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!
simon   Apr 13, 2018
how would one go about doing this using inline css???
Fabrizio   Mar 15, 2018
Thank you a lot! You solved a big problem for me ...
Hardik Chaudhari   Mar 06, 2018
Great one! I never think of this. Thank you so much for saving my time.
Ron   Feb 26, 2018
Great job! I was looking for this solution a long time. You saved my day as well. Thank you so much!
Reny   Feb 20, 2018
Thank you so much! It worked perfectly, you saved my day! xxxx
Ricardo   Jan 27, 2018
Works perfectly, thanks for sharing.
Lol   Jan 26, 2018
Thanks, that helped me
Gary   Jan 19, 2018
Thank you, I have been looking for this for a long time :)
Cynthia   Jan 01, 2018
Thank you - this works perfect!
DaWe   Dec 13, 2017
Thank you, it's easy :)
Mark   Dec 06, 2017
How do you add autoplay to this code?
Paul   Nov 30, 2017
Thank you, that solved my problem :-)
Randy   Nov 24, 2017
Clean and simple! Thank you! :)
Camilo   Nov 22, 2017
Thank you! It's a simple and great solution.
baquer   Nov 21, 2017
good stuff, short, simple n perfect.
ormembar   Nov 15, 2017
Great solution - thanks.
Rodrigo campos   Nov 08, 2017
Thank you! This is the best working solution I found, so simple that I cannot believe I didn't saw that possibility
Pankaj   Oct 29, 2017
Thanks
Sven   Oct 23, 2017
Cool! You saved my evening and the crappy wordpress template that I have to use... ;)
Krasimir Jordanov   Sep 19, 2017
Great. Thank you. Fits perfect
Watchoutonnet JointheFun   Jul 08, 2017
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
Jason Bean   Jul 06, 2017
Brilliant and elegant solution! Thank you!
Yovcho Kalev   Jun 16, 2017
thanks man
Kushal Jayswal   Jun 01, 2017
Wow. This works for my need :). Thanks for sharing. Buy the way your blog design is so impressive, neat and clean. All the best...
Alex Logemann   May 03, 2017
Thank you.
Craig Kirby   Apr 30, 2017
You're a legend. Thanks!
Stephan Gebbers   Apr 01, 2017
Very useful! Thanks!
Fewa Chuang   Mar 03, 2017
Cool trick! Thanks :)
Ross Fisher   Feb 06, 2017
Lee Fairclough Fancy seeing you here!
Eric P. Metze   Dec 04, 2016
Perfect. Thanks!
Siobhan McManmon   Oct 20, 2016
Thanks Nick! An uncomplicated bit of code that works, what a joy!
Vladimir Chanaev   Oct 04, 2016
Very usefull, tnx!
Vladimir Chanaev   Oct 04, 2016
Very usefull, tnx
Azhari Ibnu Umar   Sep 24, 2016
Thanks for the tutorial,, I serach many tricks on google but only this work for me.. thank you sir..
Heanzo Beanzo   Jul 08, 2016
Pretty cool trick with the padding, didnt know that. Thanks a lot.
Din Masih   Jul 06, 2016
thanks to you. really help.
Cliff Bandringa   May 17, 2016
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.
Naydee Polanco   Apr 26, 2016
Worked like a charm bro, much appreciated. Still works in Wordpress 4.5.1
Anonymous   Apr 26, 2016
Awesome !! Very thanks :D
Tatang Muhtar   Mar 03, 2016
Thank you ...
Leonardo Saturnino Ferreira   Feb 25, 2016
Thank you very much!!
Sergii Lazurenko   Feb 12, 2016
Just use width: 100
Lee Fairclough   Feb 09, 2016
You'll need to adjust the padding-bottom of your container to suit your individual implementation.
Niels Baeklund   Jan 30, 2016
Thanks!! Works perfectly
Arin Kingma   Jan 06, 2016
Wow, works superb. Thank you so much for sharing!
Goljar Ali   Dec 20, 2015
Please go here know the abc of iframe http://www.patroblogger.blogspot.com/2015/09/adjust-width-height-of-iframe.html
Nabeel Khan   Dec 16, 2015
awesome bro! thanks!
Nabeel Khan   Dec 16, 2015
awesome bro! thanks!
Olaf Gasbriki   Nov 03, 2015
Brilliant!
Robert Blackmon   Nov 02, 2015
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?
Dragas Dejanovic   Sep 16, 2015
Super
Nick Vogt   Sep 02, 2015
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.
Marc Molins Piulachs   Sep 02, 2015
if you want 16:9 use padding-bottom: 56.25;
Matt Struve   Aug 28, 2015
yet your demonstration video still has black bars at top and bottom. why?
Alex Rejba   Jun 29, 2015
Awesome tip, thank you so much!
Anonymous   Apr 01, 2015
Thanks!! Works perfectly and is elementary
Kristofer berg   Feb 24, 2015
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."
Harry Boden   Feb 02, 2015
Thanks so much! saved the day..