TjWallas/YouTube-Lite-Embed

jQuery plugin to embed fast light-weight YouTube videos

Overview

Designed with performance in mind, "YouTube Lite Embed" is a jQuery library that allows you to embed YouTube videos in a light-weight fashion that has minimum impact on the page initial load speed. This library is definitely aimed at YouTube embed freaks and targets pages that contain loads of embedded YouTube content.

Functionality

HTML embedded content especially flash content, takes a significant time to load which decreases the overall page load speed. As more embedded objects are added to the page, this could literally spell page load chaos. This library addresses this issue by not directly loading YouTube embedded content. Instead, video thumbnails and titles are fetched using the YouTube Data API then placed in such a way that makes it look like the YouTube embedded player layout. Moreover with the aid of the jQuery lazy load plugin, these fetched thumbnails are only rendered using Ajax when the user scrolls to see them thus, the thumbnails loading time is also eliminated.

Usage

1. import "jQuery" & the "lazy load" plugin if you haven't:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.lazyload.min.js"></script>
   

2. import the "YouTube Lite Embed" Plugin:

   <script type="text/javascript" src="lite-youtube-min.js"></script>
   

3. Add the following CSS Rules:

   <style>
   	div.lite {
   		position: relative; left: 0; top: 0
   	}
   	img.lite:hover {
   		background:url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/s800/youtube-play-button-hover.png)
   	}
   </style>
   

4. Finally, you can simply embed a youtube video anywhere using the following markup:

   <div class="lite" id="youtube_video_id" style="width:my_width;height:my_height;"></div>
   

   Where:

   • youtube_video_id is the id of that video. (Typically, the value after 'v=' in the URL)
   • my_width and my_height are the width and height of the embedded player in either pixels (Ex: 360px) or percetage (Ex: 50%).

   Alternatively, you can install this chrome extension that I coded which will automatically copy the aforementioned special markup code to your clipboard whenever you click it's icon whilst being at a youtube video page.

Demos

• A demo page consisting of 10 YouTube videos while using the lite embed library can be found here (fast embed demo)
• An equivalent demo page to it WITHOUT the library can be found here (slow embed demo)

Benchmarks

The best way to test it out is to check the demos above. You'll instantly feel the difference especially if you are a *nix user.

"There are three types of lies: lies, damned lies and benchmarks"

That being said, let's get down to the results =)

Without the lite embed library, the page took 7.721s to fully load without caching. On the other hand, the page took ONLY 1.263s to load using the library under the same benchmark configuration. This is 6.1x Faster !!!. (PS: this was only tested on a page that has 10 videos. Try it with more videos and be impressed)

• Benchmark summary using the library:

  				Document Complete			Fully Loaded
  	Load Time	First Byte	Start Render	Time	Requests	Bytes In	Time	Requests	Bytes In
  First View	1.227s	0.190s	0.804s	1.227s	18	75 KB	1.263s	18	75 KB
  Repeat View	0.521s	0.196s	0.503s	0.521s	1	2 KB	0.865s	12	6 KB

  • Benchmark summary without the library:

    				Document Complete			Fully Loaded
    	Load Time	First Byte	Start Render	Time	Requests	Bytes In	Time	Requests	Bytes In
    First View	0.947s	0.198s	0.000s	0.947s	3	39 KB	7.721s	28	602 KB
    Repeat View	0.556s	0.149s	0.000s	0.556s	2	6 KB	0.962s	12	41 KB

    • Detailed results can be fount at link1 and link2 for the "Using the library" and "Without the library" scenarios respectively.