H3XED

How To Make a Responsive 100% Width YouTube iFrame Embed

Please note that this post is over a year old and may contain outdated information.
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.
Share This Post
Twitter
Web Dev Resources
Best Selling HTML & CSS Book
Best Selling HTML & CSS Book
See More Details
Best Selling Web Design Book
Best Selling Web Design Book
See More Details

Comments (63)

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..
Share This Post
Twitter
Web Dev Resources
Best Selling HTML & CSS Book
Best Selling HTML & CSS Book
See More Details
Best Selling Web Design Book
Best Selling Web Design Book
See More Details
H3XED © Nick Vogt   RSS   Policies   Twitter