Responsive Videos

We all LOVE videos! But they can be a real difficult thing to do responsively. So here is some code to help you make videos responsive in your next ExpressionEngine CMS site.

The HTML

<figure class="video">
	<div class="video-player">
		<iframe src="//player.vimeo.com/video/39394380?color=f0a400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	</div>
	<figcaption><a href="http://jamesmathias.com">James Mathias</a> &mdash; Made By Few</figcaption>
</figure>

I use a figure, so that I can add a caption, the important part is the div.video-player around the iframe. Here I use a class of .video on the figure as a best practice for potential CSS targeting.

Speaking of CSS, here is the LESS object.

.video-player{
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround */
	position: relative;

		/* set dimensions and position of elements inside .video-player */
		embed, iframe, img, object, video{
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
}

That’s all you need. Remember don’t put a width or height attribute on the iframe, the browser will do this math for you!

You can demo and play with this code here: https://jsfiddle.net/jmathias/g7mwrmxw/

Now go fill your ExpressionEngine CMS sites with videos, to the brim!