Skip to content

Latest commit

 

History

History
151 lines (128 loc) · 9.63 KB

README.md

File metadata and controls

151 lines (128 loc) · 9.63 KB
Raw

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

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 View1.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.