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-% and auto trick works with native HTML5 video tag, but it doesn't work with embed code using br 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.

View Demo Elastic Videos

Elastic HTML5 Videos (demo)

With HTML5 video element, you can easily make it elastic by using the max-% trick (see elastic HTML5 video demo). As mentioned in the introduction, this trick doesn't work if the embed code uses br or object tag which is commonly used by most video sharing sites such as YouTube and Vimeo.

video {
	max-%;
	auto;
}

Elastic Object & br 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 (br, 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;
	;
	overflow: hidden;
}

.video-container br,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	%;
	%;
}

HTML

<div>
	<br src="/img/spacer.gif"> 

.video-wrapper {
	px;
	max-%;
}

<div>
	<div>
		<br src="/img/spacer.gif">