Responsive Videos


<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

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…

Comments 1

April 12, 2019


Very nice tip..

I will use it for an image from a video… it’s not a crime ? Isn’t it ?