Better page load performance when loading multiple embedded Youtube videos?

Question

I have a page which displays multiple (usually 10) embedded videos. The videos use the new IFRAME embed code of youtube and apparently for every IFRAME there is a separate request when loading the page. Is there a way to defer loading the videos after the rest of the page is loaded, so they don't slow down page loading that much?

Answer 1

Well, I wrote a javascript thingy (called "LYTE") that will create a "dummy player" (which looks & feels like a normal YouTube embed) for every div with a specific class ("lyte") and id with the YouTube-id. Only when clicking the "dummy" player, the actual YouTube iframe is loaded and it indeed has an important impact of the performance of pages that embed YouTube videos. You can see it in action on my blog.

LYTE is currently not really available standalone, only as part of WP-YouTube-Lyte, the WordPress plugin I wrote, but with minimal changes you should be able to extract all relevant code from the plugin.

You basically have to create something like this in your HTML;

<div class="lyte" id="7nuiOe8M6bw" style="width:640px;height:385px;">
<script type="text/javascript"><!-- 
var nT='newtube-';var bU='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/';
var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert}
function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}}; 
 --></script></div>

This block will load lyte-min.js, which will fill the div with all graphical elements of the dummy player (image, play button, control bar, title) and will add an eventlistener to the div that will trigger the replacement of the div with the real embedded player when clicked.

You can find the plugin here and look at the code here (wp-youtube-lyte.php creates the div, lyte/lyte.js is the actual javascript ... thingy).

Answer 2

Check out this solution: Load the YouTube Video Player On-Demand

Basically, it's like replacing your YouTube video iframe player codes with jQuery when clicking some thumbnails.

Answer 3

This is a jsfiddle demo.

HTML

<div class="youtube-container">
   <div class="youtube-player" data-id="1y6smkh6c-0"></div>
</div>

Javascript

(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

CSS

 <style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>

Answer 4

Automatic, request reducing, solution

In WordPress plugin form

Here is a WordPress plugin you can download and manually install via the WordPress plugin repository. I created this today just to handle this situation. No changes to content are needed, this works automatically once activated on any and all iframes.

https://wordpress.org/plugins/lowermedia-iframes-on-demand/