• Home
  • About
  • Tech
  • Projects
  • Contact
TjWallas.DevOps().Labs>

YouTube Lite Embed: A jQuery library to embed fast, minified and light-weight YouTube content

12/2/2012

 

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.

Download

Download Me

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.

Fork me on GitHub

Development

jQuery/JavaScript performance guru/perfectionist? Come join the party! What are you waiting for?
https://github.com/TjWallas/YouTube-Lite-Embed

Comments are closed.
Powered by Create your own unique website with customizable templates.