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.
Thank you!
Thanks. ^_^
This is great, thanks!
Thanks! My client keeps mentioning a .css movie that can be used in ipad and other mobile devices and they really had me confused.
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?
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.
That is a great post. Thanks a lot!!
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?
nice it’s help me
Nice! I would like to use that trick to embed a Vimeo video on Google Sites. Any chance to get this work?
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
Thank you!!!
Thank you!!!!!!!
Solved my problem.
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.
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!!!!!!!!!!!!!!
The html5 video example does not seem to be working properly with my iPad 3 on iOS 6. The video is tiny, and has large black bars on either side. So we may need a better solution for responsive html5 video that supports the iPad.
…and after some tinkering I appear to have identified a fix. Rather than giving video “height:auto;” we can treat the video tag the same way as object and embed tags – but leaving off the 30px top padding, since native browser controls are overlaid on the element. So we’re left with:
.video-container {
position:relative;
padding-bottom:75%;
width:100%;
height:0;
overflow:hidden;
}
.video-container video,
.video-container object,
.video-container embed {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Thank you so much for this code! Works perfectly!
Thank you for this great tutorial. I am gonna use this also for my website too.
Again, thank you. I just learned more on your site than i did in 11 weeks of class. Boom!