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.
Elastic HTML5 Videos (demo)
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;
}
Elastic Object & Iframe Embedded Videos (demo)
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.
CSS
.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%;
}
HTML
<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>
How to Create Fixed Width & Elastic
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%.
CSS
.video-wrapper {
width: 600px;
max-width: 100%;
}
HTML
<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 -->
Compatibility
This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad).
Credits
This trick was found on tjkdesign.com.
Thanks a lot for this awesome trick.
I like it. Thank you
simple and very useful
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
Neat trick… :) Could you explain the reason behind 50%/60% padding (as opposed to any other padding value)?
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;
}
And then he handed you the thirty-five 45
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;
}
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.
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
perfect site for my website
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!
Thank you so much, was looking exactly for this! Worked perfectly
Thank you for this and all the other work you share.
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?
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.
THANKS FOR THIS AWESOME TRICK!
This is really a very vital information about HTML coding which helped me a lot in completing my project based on this codes!
Brilliant trick. Thanks a lot for sharing…
This trick works great. Thanks so much!
This worked great, had a few work arounds to make it work in my situation, but thanks for this share!!
This will likely be the most important piece of info I pick up in 2012. Thank you so much for posting this.
Great work! Like it!
Perfect, elegant and no JS!