Lazy load YouTube videos

Update Feb 26th 2012: new version here.

YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.

But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.

I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.

Nowadays the new YouTube embed code looks like this:

<iframe width="420" height="315" src="http://www.youtube.com/embed/eS67OxC_UN0?rel=0" frameborder="0" allowfullscreen></iframe>

Resulting this (normal YouTube embed):



Using lazy loading

So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:

<a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Jean Sibelius: 3rd Symphony, 1. Allegro Moderato</a>

Result (lazy loading):

Jean Sibelius: 3rd Symphony, 1. Allegro Moderato

or if you wish other size than default 560 x 315, do like this:

<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>

Resulting this (lazy loading):

Mozart Fantasy in C minor played by me

If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".

Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.

Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with   to get consistent indenting.

If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.

When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.

Here's another demo page (besides this post) with many videos: 11. joulukuuta.

Installing the lazy loader

Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):

Update Feb 26th 2012: new version of the script here, you should consider using it.

Data provided by Pastebin.com - Download Raw

Embed parameters

If you want to have parameters in the embed code, just put them into href, like this:

Bach Contrapunctus I from the Art of Fugue, played by me<br />
<a class="youtube-lazy-link" style="width:560px;height:410px;" href="http://www.youtube.com/watch?v=bETMzZhunDI&rel=0&color=white&theme=light&showinfo=0">Bach Contrapunctus I from the Art of Fugue, played by me</a>

Resulting (lazy loading):
Bach Contrapunctus I from the Art of Fugue, played by me
Bach Contrapunctus I from the Art of Fugue, played by me

If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.

Reference: YouTube embedded player parameters.

Feedback?

I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.

I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.