The time it takes for a web page to load can be crucial. If it takes too long your visitor might give up and go elsewhere. One of the things that can affect the loading time of a web page is video. One of the things that can drastically affect the loading time of a web page is lots of videos on the same page. Which happens to be the case on a clients website.

I looked around for a solution to delay the loading of the videos on the page until someone clicks the play button. Added challenge is that the solution needed to keep up with the responsive design of the website, so the physical size of the videos need to scale with the screen size.

The page in question loads iframe embeds from YouTube. Amit Agarwal has an efficient embedding method for YouTube videos. It works by showing the YouTube thumbnail of the video on the page. Only when a visitor clicks the play button will the video be downloaded. Drawback is that you have a slight delay for the video to start, but I think that’s acceptable for the overall weight of the page.

To make it work you replace the iframe code with this:

<div class="youtube" id="youtube_video_id" style="width: 320px; height: 180px;">
</div>

and include Amit’s youtube.js file at the bottom of your page.

That works great, but with a responsive website the width and height declaration inside the div is an issue. My solution is to add another div inside the .youtube div. Not ideal, but I am on a mission.

<div class="youtube" id="youtube_video_id">
    <div class="video_hack></div>
</div>

Then add this to your stylesheet:

/* Lazy load of video's */
.youtube { width: 100%; }
.video_hack { margin: 0 0 57% 0; }

The margin-bottom replaces the height value for the .youtube div. You may need to play with the percentage value to get the correct height.

So far so good, but the video will still not scale once you click the play button. There is an article on A List Apart about Creating Intrinsic Ratios for Video with the solution.

The solution is to add yet another div around the .youtube div (I am going to call this method: “The Drupal method of lazy loading video's combined with responsiveness” - sorry Drupal community).

<div class="fit_video">
    <div class="youtube" id="youtube_video_id">
        <div class="video_hack"> </div>
    </div>
</div>

And then add these styles for the .fit_video div

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

.fit_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And that’s it. No more divs to add.

For the number people out there here are some stats before and after this method was added to the page.

Before

• Number of videos on the page: 9
• Total requests: 85
• Data transferred: 3.5Mb

After

• Number of videos on the page: 9
• Total requests: 35
• Data transferred: 591Kb

For completeness, if you are only interested in responsive video and not the lazy load thing, then you can always use FitVids.js. It’s a lightweight, easy-to-use jQuery plugin for fluid embedding video. But I found it not being compatible with the lazy load method.