CSS: Elastic Videos

While I was coding a Joomla theme for a client using HTML5 and CSS3, 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.

Elastic HTML5 Videos

 With HTML5 video element, you can easily make it elastic by using the max-width:100% trick 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

The trick is very simple. You need to wrap the embed code with a

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

How to Create Fixed Width & Elastic

To restrict the width of the video, an additional

wrapper is required. Wrap the video with another

tag and specify a fixed width value with max-width:100%.

CSS

.video-wrapper {
 width: 600px;
 max-width: 100%;
}

HTML

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.