I have been wondering how much time does YouTube embed player cause me to load even I dont play it. I watch at least a few videos a day on YouTube and sometimes I embed videos in my blog. So, I must ask myself, how much time? I believe many people have felt Adobe Flash Player isnt a cheap player at all, it uses quite amount of resources. Try to scroll down (Page Down) while YouTube Blog is loading, you will see what I mean. Even after Square Preview released and it got improved significantly, still, you have to pay some.

I decided to investigate. YouTube recently switched to <iframe/> as default embed code, you still can choose the old embed old. So I used the new code and Chromium 8.0.552.224 to test (Firebug does not supports Firefox 4 yet).

The following code only contains the <iframe/>:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
</head>
<body>
<iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/ahCwBBndlVY?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>

The loading time is 720ms, sum of loading times of

  • the page self,
  • www.youtube.com/embed (~300ms),
  • a css,
  • a gif,
  • a js,
  • a swf (~273ms),
  • a xml, and
  • a jpg.

Its clear how much loading a YouTube player will cost you. Basically, almost 600ms for loading the player. I added another videos embed code, it took 1.02 seconds, then third video, 1.45 seconds. Its safe to say the loading time is ~0.5 multiply by the number of videos.

How can we avoid? I thought maybe we can load the player later if the visitor wants to watch. Just an empty box with hint, thats a good idea, isnt that? Not everyone is interested in playing a video in your stuff. At first, I wrote this simple code,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style>
.yt-loader {
font-size:2em;
text-align:center;
}
</style>
<script>
function load_yt(div) {
  var yt = document.createElement('iframe');
  yt.title = "YouTube video player";
  yt.width = "853";
  yt.height = "510";
  yt.src = "http://www.youtube.com/embed/ahCwBBndlVY?rel=0&hd=1";
  yt.frameBorder = "0";
  yt.setAttribute('allowfullscreen', '');
  div.parentNode.replaceChild(yt, div);
  }
</script>
</head>
<body>
<div class="yt-loader" style="width:853px;height:510px;border:1px solid black;-webkit-box-shadow: 1px 1px 5px black;" onclick="load_yt(this)">Click here to load</div>
</body>
</html>

Visitors can click to load player if they really want to play. The loading time is 1.25ms, or 0.00125 seconds. Of course, it shouldnt take much time. Its just a page with a <div/> and simple style and a JavaScript function. But there is an issue, that isnt attractive at all. Yeah, I did add box-shadow, that wasnt really helpful. What visitors really want to see is a thumbnail. We look first, then read. Well, most people dont do that latter at all.

I have few experiences with YouTube API, I know there is thumbnails in response data. Therefore, a better version,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style>
.yt-loader {
font-size:2em;
text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
function load_yt(div) {
  $yt = $('.yt-loader');
  $yt.replaceWith($('<iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/ahCwBBndlVY?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>'));
  }
function init_yt() {
  $yt = $('.yt-loader');
  $.getJSON('http://gdata.youtube.com/feeds/api/videos/ahCwBBndlVY?v=2&fields=media:group(media:thumbnail)&alt=json-in-script&callback=?', function(data) {
    var tbs = data.entry.media$group.media$thumbnail;
    var tb;
    for (var idx in tbs) {
      tb = tbs[idx];
      if (tb.yt$name == 'hqdefault')
        break;
      }
    $yt.append($('<img/>').attr('src', tb.url));
    });
  }
$(init_yt);
</script>
</head>
<body>
<div class="yt-loader" style="width:853px;height:510px;border:1px solid black;-webkit-box-shadow: 1px 1px 5px black;" onclick="load_yt(this)"><div>Click here to load YouTube player</div></div>
</body>
</html>

This version retrieves a thumbnail of the video via YouTube API. The loading time is 284ms, jQuery 1.5 takes ~30ms, API request takes ~200ms, and a jpg takes ~10ms. It can be automatically played using YouTube JavaScript Player API after visitor click. If you dont want to use jQuery, you can cut 30ms out.

I dont know if anyone has also noticed such time waste and resource waste. Maybe someone has written a library to do similar job. Anyway, I am thinking something like

<script src="blah.js"></script>
<script>blah_embed('YOUTUBE_VIDEO_PAGE_URL', width, height, div_id);</script>

, or a function uses document.write() (which I dislike very much),

<script src="blah.js"></script>
<script>blah_embed('YOUTUBE_VIDEO_PAGE_URL', width, height);</script>

, or a <iframe/>,

<iframe src="http://example.com/embed/..." .../>

Just replace youtube.com with example.com, where provides this kind of function. Then the script will render a nice video thumbnail with text and wait visitor to click.

But then I think, since <iframe/> is default embed code, YouTube can already make this happen. If they did, the world would be greener.