While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action.
With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). As mentioned in the introduction, this trick doesn’t work if the embed code uses iframe or object tag which is commonly used by most video sharing sites such as YouTube and Vimeo.
video {
max-width: 100%;
height: auto;
}
The trick is very simple. You need to wrap the embed code with a <div> container and specify 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
To restrict the width of the video, an additional <div> wrapper is required. Wrap the video with another <div> tag and specify a fixed width value with max-width:100%.
.video-wrapper {
width: 600px;
max-width: 100%;
}
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad).
This trick was found on tjkdesign.com.
Louis Gubitosi
Great tip, thanks Nick!
Catalin
Very useful trick and thanks for sharing!
Martin
Wow. I changed our layout mainly because of this problem and use scale now for the responsiveness. But this solution is awesome! Thanks for sharing.
daniel
Very cool. Thanks for the tip.
Tommaso
That’s what i was looking for from long time!!
Thanks
Flowermountain
Excellent, I was just about to look for this when I came across your article.
Thanks a lot!
Peppe
Finally a solution for this. Thanks :)
Vladimir Krasko
High five for epic find!
shawn
Thanks for the tip. Been using this technique all week and absolutely love the results. Proof positive that u r da man :)
Doug
Great! Thanks!
joost
Hi,
tnx for the post. I was wondering how you could test all these devices fast. Do you have any tooling for this perhaps?
Hollywood Cat
You can test across several device widths on:
http://www.studiopress.com/responsive/
Robert
Great Solution, thanks!
Paolo
Very good solution! Compliments and thanks!
Manuel
Cool trick for 100% width videos, thanks for sharing! :)
evermeg
A very awesome simple theme! and appreciate the workup of how to do this. great!
Alex
Amazing! Great simple solution to a problem I’m sure loads of people have. Can’t count the number of times I’ve seen Youtube videos escape their enclosing boundaries. Props.
Tom Hermans
Thanks, good idea. And certainly something I’ll built in my own base theme.
ToM Hermans.
John C. Olsen
This is just what I’ve been looking for. It works almost perfect too. I noticed something I wonder if is possible to fix though. With your code here, YouTube videos embed perfectly edge to edge while Vimeo videos get’s a back bar added to the top and bottom. Likewise, if I set the padding to .video-container { padding-top: 0; } Vimeo videos embed perfectly edge to edge while YouTube videos gets a black bar added to the left and right.
Is it possible to make both Vimeo and YouTube videos have a perfect edge?
paul mason
Hi, Did you find the solution for this? i’m having the exact same issue, would be good to know if there is a work around
Marybeth
This is phenomenal and precisely what I was looking for. Thank you so much for sharing! I’ve been looking for a way to keep YouTube videos under control ;)
Aquecedor Solar Campinas
Awesome. It saves a lot of trouble!
Attractivo
Problem solved. Great advise – thank you!
Manifo
Thanks for sharing. U saved much time to many people :)
HMS Home Warranty
Hey great post..
This should make all user’s life a lot easier from now on. Thanks a lot for posting the project files
Its now easier to understand Elastic CSS better…Thank You
alex
Interesting article! Very useful! I will use this in my future projects!
Peter Schreiner
Again. Thanks for the great tip!
Claudio
The trick works very well, thank you!
Web Designing
Excellent Info. Will be a great help. Thanks for sharing it.
logo ontwerp
?
dave
well done!
danny
awesome! thanks, i’ve been wondering about this for a while.
Crowdfinch
It is a very awesome information.
bob
So max-width:100% is the big deal?
Atif Iqbal
Its work nice for me, thank you.
amplifyme
[code]
img,
iframe,
object,
embed {
max-width: 100%;
}
[/code]
Edson
Awesome technic! But I didn’t understand the meaning of that value for padding-bottom (56.25%?). Could you better explain that please?
iPog
it’s the 16:9 aspect-ratio in percentage (9/16*100).
you might want to define classes for this and for other ratios, e.g.:
figure.ar169 { padding-bottom: 56.25%; }
figure.ar43 { padding-bottom: 75%; }
figure.ar11 { padding-bottom: 100%; }
then you can allow the user to change the class value by a js button or whatever…
(anyway, i use the html5 figure element as the container.)
John Smith
Awesome!
Pavel
Hello!!
Very Nice Template!!
Thank you!!
El garch
thx for the tuto ;)
iPog
you can remove the “padding-top: 30px;” part from the css if you don’t want fixed control bar for youtube videos. just add the parameter after the video url: ?autohide=1 :) (and there’s really no need to add extra 30 pixels in case of the vimeo player.)
Pozycjonowanie
Its work nice for me! Thank you.
welington
Nice blog! Great work!
web design Curitiba
Thierry Koblentz
@Nick La
You should follow the Creative Commons (CC) “guidelines” when using someone else work: http://creativecommons.org/licenses/by-nc-sa/2.0/
Please let me know if tweeting the above can help…
Edmonton
Excellent. I was looking for a solution for a website based on the 1080p (1920×1080) resolution. The videos work awesome! Thank you for sharing.
bebek odasi
perfect tips. i tried and its work. thank you very much.
Edmonton Web Design
Ahhhh, I didn’t see what was special about this until I read what you mentioned about the padding. Very creative.
Saeed Neamati
Yes, max-width trick is really helpful. I want to create a page at Web tips and tricks to centralize these techniques.
Thank you.
jon bece
very nice template Design
Browse Design
it looks great. i may use it in my site. thanks very much.
Vernon Website Design
Brillant… your a life saver!
bbbb
50 Comments
Ian Day
Thanks for this information. I had the same issue with a site that had a lot ofvideo content. My problem is now solved.
Thanks
Ian
Travis Anderson
This was exactly what I was looking for. Thanks for taking the time to post!
London Car Rental
These are great! Thanks for sharing…love the Elastic HTML5 Videos.
tunisie
thanks very good idea for my website thanks a lot
Ronny
Say, did you manage to teach WordPress to wrap oembeds into a div automatically? If so – how the heck? :)
billybob
Can this be used with the jwplayer?
Don
Did you find a good solution for JWPlayer? I’m having issues with Youtube through JW on an adaptive site.
shiva
WOW!!! Nice Tip
Chris Bracco
This. is. amazing. Thank you so much for the link!!
Mike Badgley
One thing I’d recommend doing is ensuring that your videos are being set to the proper aspect ratio. There is no guarantee that they will be in 16:9.
height / width * 100 = padding-bottom
crowd SPRING
I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.
SEO from Creare
I have had an issue with this for ages, especially now as I have just created a site purely built on video content. The ideas in this will come in handy big time, thanks! I may even share my site with you to see how your fix may have worked.
Sven
Thanks a lot for this awesome trick.
alovilla
I like it. Thank you
silvi anggraini
simple and very useful
Abhishek Singh
Hi,
i tried ths trick on my site, but it did not worked.
Please refer this link and let me know the cause of it, and how to fix it : http://www.watchurshow.com/2011/07/iifa-2011-canadas-toronto-2011-24-july_92.html
iamkeir
Neat trick… :) Could you explain the reason behind 50%/60% padding (as opposed to any other padding value)?
Abhishek Singh
Hi,
Thanks.
Are your talking about 56.25% padding value for padding-bottom.
This is just i copied the code from your example. No Brainer… :D
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
complex41
And then he handed you the thirty-five 45
Abhishek Singh
Hi,
Thanks.
Are your talking about 56.25% padding value for padding-bottom.
This is just i copied the code from your example. No Brainer… :D
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Ask A Geek
I’ve been designing web sites for over 15 years but I haven’t really done much HTML work as of late. More importantly I haven’t done anything in HTML 5 since most everything I do now is databases and scripting. I’m going to have to look more into HTML5 as it looks like it has a lot more oompf than HTML4 had. The video trick is pretty neat.
discount mbt
There’s no doubt that this is certainly essentially the most vital information personally. And i am glad reading your article. But should remark on few general things, Your website style is perfect, the articles is very excellent : D. Good job, cheers
mybookmart
perfect site for my website
Johnny 6
I’ve been building sites for about 2 1/2 years now. This site is on a short list of web design blogs I reference continually. Embedding YouTube videos into a responsive design was something I had to deal with recently on my hobby site, yesterday actually. I plan on going home and implementing this solution immediately. Thanks!
Jay
Thank you so much, was looking exactly for this! Worked perfectly
Le
Thank you for this and all the other work you share.
Keith
I am working on a new responsive design and found this very helpful. In my situation I am using BuddyPress and a plugin called BuddyPress Activity Plus. I am relatively new to web design so I am not technical enough to edit the plugin.
After playing with it for a little while I found that just using the a max-height and max-width it seemed to do the job. All I added to my css was:
.activity-inner iframe,
.activity-inner object,
.activity-inner embed {
max-height: 100%;
max-width: 98%;
}
Like I said, I am pretty new to this, so I am not sure how cross browser compatible it is but I think it will serve my purposes.
Any thoughts on if this will work across the board?
Kripaluji Maharaj
The CSS design always has helped millions of people on the earth and i am also one of them, Thanks for the great design and great comments to it.
Alex
THANKS FOR THIS AWESOME TRICK!
Kripalu ji Maharaj
This is really a very vital information about HTML coding which helped me a lot in completing my project based on this codes!
Jose
Brilliant trick. Thanks a lot for sharing…
Chris LaChance
This trick works great. Thanks so much!
Tucker Joenz
This worked great, had a few work arounds to make it work in my situation, but thanks for this share!!
Lloyd
This will likely be the most important piece of info I pick up in 2012. Thank you so much for posting this.
HIelscher Ultrasonics
Great work! Like it!
James
Perfect, elegant and no JS!
someonetech
Excellent!
Jeff Golenski
Thanks for this solution, really appreciate it!
Tom Mepham
Great! Thank you very much :)
Michael DuBois
Thanks so much! Worked perfectly.
Jess
Thanks a lot
Amazing and simple ;)
James
Cool, thanks very much for the fix. Seems silly that YouTube doesn’t have an option for filling in the auto height (if height is not supplied). It’s already a bit complicated for general users so this cuts down on problems with the automation/integration process.
Dave
It works great for IE and Chrome but it doesn’t work for FF 11. Do you have an idea how to get this in FF done?
Brian
You may have found this tip at tjkdesign.com, but you rock for bringing it to the rest of the world! Your site came up first in Google (and a very nice site btw).
Yorik Wnent
Passing a small # shortcode [video] to # wordpress for all his videos responsive with the # css link above.
In the functions.php file add:
caption_shortcode function ($ atts, $ content = null) {
return ”. $ content. ”;
}
add_shortcode (‘video’, ‘caption_shortcode’);
And after in the articles or posts surrounded the code from youtube without width = “#” height = “#”.
example
[video] [/ video]
Yorik Wnent
Can’t put any div
http://pastebin.com/UVcAbuUM
Richard
I was trying using the method but when I put float left, it failed miserably.
Richard
Sorry but never mind, fixed the issue by making another wrapper on it. You can’t float the video container directly.
Aygon
Thanks for the awesome tip!!!
Extra video-container made it work like crazy!!! :D
SuperPhil
Awesome Tip!! This will really help with a responsive theme I am working on.
Tommy
If you could help with this problem, that would be great! I’m trying to set a div with a border background that will auto height itself with added content. Trouble is, the content has absolute divs in there, which just don’t obey auto height – they are a rule unto themselves. How would I code a div that will auto adjust? Any help appreciated.
juan
Million thanks!!
Web designing company Mississauga
Videos are good ways for connecting with your audiences and readers of your website are getting chance to see you in action.So videos must be used in website
Gabrielle
Excellent post. I’ve been working with responsive design for the past couple of months and stretching my wings a bit. I appreciate how concisely you spelled all this out. Wonder if you know of a responsive audio player that can be duplicated on same page (I’ve only found one using jS that allows just one music clip per page)?
Tim
Thank you for this solution!
Uxepi
Amazing!!! streamlined and beautiful!. …worked seamlessly.
Thank you so much for your efforts.
-uxepi
kolpi
Hi,
I’m currently viewing the demo page with Firefox 13 and I cannot resize the width of the Firefox window.
Seems like a Firefox issue to me as it works everywhere else (Chrome, Safari, Opera, IE), and there is also a bug report about it: https://bugzilla.mozilla.org/show_bug.cgi?id=765788
Just wanted to let you know ;)
Thanks for your work
Hollywood Cat
This is great. Has saved me so much work as I am new to responsive design but the more I do, the more I like it!
bilgin
thank you for this clean solution. like it (Y)
A Alyan
Thank you!
Doxotron
Thanks. ^_^
Kirstan
This is great, thanks!
CDubbya
Thanks! My client keeps mentioning a .css movie that can be used in ipad and other mobile devices and they really had me confused.
yves
great post, thanks. nevertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with FF13… anyone found a solution for that?
Craig Smith
I always wrap my iframe or embedded code in a div that I stylize/size separately, I will have to try out this trick. I don’t use much video, but I am sure it will come in handy for other things as well. Thanks.
Prasad Sambari
That is a great post. Thanks a lot!!
Ibiza yates
evertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with FF13… anyone found a solution for that?
mahesh
nice it’s help me
Francis Roy
Nice! I would like to use that trick to embed a Vimeo video on Google Sites. Any chance to get this work?
Ibiza
thanks. nevertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with
Szczepan
Thank you!!!
Xianstudio
Thank you!!!!!!!
Solved my problem.
Raymond
This is a nice article. I found a problem when a mobile device is rotated from portrait to landscape.
The youtube video restarts because of the resized elements. It’s quite annoying and I’m not sure how to stop the video from restarting.
Any hints would be appreciated.
Jeff Wiencken with Rex Post
I have a shape 5 template up, installed fitvids, can’t make it work could you would you share HTML code to insert into module, I would prefer embedding video if that is possible.
The site is not live so I can’t share without providing log in HELP!!!!!!!!!!!!!!
cpaul
Thank you so much for this code! Works perfectly!
Marty John
Thank you for this great tutorial. I am gonna use this also for my website too.
snaphuman
Thank you man. It works great!
Vasilis
Thanks its what i was looking for!
Tom Toner
Thank, exactly what i was after and works great!
Lucas
Thanks! :D Very nice job!
Paul
Since upgrading my iPad to iOS 6 this fix doesn’t seem to work any more, I think it’s height: auto causing the issue. Anyone experienced similar and have a fix?
sepelus
Great stuff!!, I also found great ideas in this site: http://www.freakzion.com/index.php/The-Blog-December-2012/resize-your-videos-in-responsive-design.html
Hope it helps you as well
Opiek Pulau Tidung
Wow, nice tips.
Will try it on my web soon
Thank you
Denny Toko Komputer
Great share..
Thank you
Mops - Household
Hey !
This sounds interesting. I will definitely apply this in my next project.
I really liked this post.
Thanks for the coding.
Mops – Household
Chris
Hi,
In case any of you are trying to use 4:3 video in an iframe like youtube adjust the css to this:
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 75%;
padding-top: 0;
position: relative;
}
Test Shred Review
Simply wish to say your article is as astonishing.
The clarity in your post is simply excellent and i could assume you’re an expert on this subject.
Fine with your permission allow me to grab your feed to keep uodated with forthcoming post.
Thanks a million and please keep up the enjoyable work.