Embed youtube video with javascript on-click lazy loading approach

Embedding youtube video using the default iframe code fetches couple of files and makes the page load little slower for the end user. Many users may not actually play the video. It also loads a flash file on the page even if we don’t not play the video.

Default YouTube embed code

Here is how the default embed code looks like:

<iframe width="420" height="315" src="http://www.youtube.com/embed/1B-vb6yZBI8" frameborder="0" allowfullscreen></iframe>

It fetches couple of pages. Some of these are:

1. iframe main page: e.g. http://www.youtube.com/embed/NxJ0W-yz0LQ
2. Css and Javascript files from YouTube.
3. A flash (swf) file
4. Video thumbnail and few other files

Embedding YouTube video using lazy loading

In this solution we just embed the thumbnail of the video and display a play button or something similar which on clicking load all the required pages/files from YouTube and startes the video. Here are the steps for this:

1. First insert this code wherever you want to display the video image with play option.

   <div id="youtubeembed" id="gdXN0DXMd6Y"></div>

2. Insert jquery.embedyt.js javascript code at the end of your html document.

   /*jslint indent: 2 */
   /*!
    * EmbedYt 1.0
    * Author : http://infoheap.com/
   */
   (function ($) {
     "use strict";
   
     $.fn.embedyt = function (youid) {
       var htm = '<div id="player' + youid + '"' + ' style="background-image:url(' + 'http://img.youtube.com/vi/' + youid + '/0.jpg' + ');' + 'width:480px;height:360px;text-align:center;line-height:360px;' +  '">' + '<input style="cursor:pointer;" type="button" value=" play " />' + '</div>';
       this.html(htm);
       this.find("div input[type=button]").bind('click', function () {
         var ifhtml = '<iframe width="420" height="315" src="http://www.youtube.com/embed/' + youid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>';
         jQuery(this).css("cursor", "progress");
         jQuery(this).parent().parent().html(ifhtml);
       });
     };
   
   }(window.jQuery||window.$));
   

   Since the code is small it is better to insert it as inline javascript to avoid one extra round trip to fetch the javascript file from the server. Other option is to insert is as external javascript file include.
3. After above script code (jquery.embedyt.js), insert the following code to insert YouTube video thumbnail image and link into the video container div.

   jQuery(function () {
     jQuery("div.youtubeembed").each(function (index) {
       jQuery(this).embedyt(jQuery(this).attr('id'));
     });
   });

   Note that the above code runs after the html document has been loaded and is ready. The first line where we pass a function to jQuery ensures that.

4. Here is how it looks when it renders in browser. You can also see a live example in this post.
   If you want to use some image instead of play button, you can make small modification in the code and replace button with image.
5. In case you are using wordpress, you can add an action handler on wp_footer and embed the javascript for jquery.embed.js and the call to embedyt. Here is high level pseudocode:

   function my_inline_footer_js() {
   // echo javascript here
   }
   add_action('wp_footer', 'my_inline_footer_js');