CSS: Elastic Videos

View Demo Elastic Videos

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).