Responsive Videos

By James Mathias · December 10, 2016 · Read in one minute.

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://leihu.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!

James Mathias

Hopelessly in love and devoted to his wife of twenty-two years, their three sons, & daughter. For the last eighteen years James has dedicated himself to helping make the Internet better. Previously he…

Responsive Videos

Comments 1

stefanos