James Mathias's avatar

Responsive Videos

by: James Mathias on: 12/10/2016 | Read in 2 minutes

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.


<figure class="video">
	<div class="video-player">
		<iframe src="//" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	<figcaption><a href="">James Mathias</a> &mdash; Made By Few</figcaption>

I use a figure, so that I can add a caption, the important part is the 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.

	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:

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

James Mathias's avatar

James Mathias

Father of four, husband of one, Internet improver, gamer, fitness amateur, artist, writer + outlaw.

Have ideas on how to improve this article? .(JavaScript must be enabled to view this email address) or share your feedback with @ellislab on Twitter.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases