Google Blogoscoped

Friday, July 27, 2007

Multiple YouTube Videos on a Page

Sometimes you want to embed multiple AdSense YouTube videos on the same page, e.g. for a top 10 list. It can also be nice to automatically turn links pointing to YouTube into embedded players in the comments or forum sections of a site. But the problem with the YouTube player's default behavior (unless someone knows a trick to get around is) is that videos keep buffering once you hit play; meaning that if on a page of 10 videos you clicked video #1 but then decide you'd rather see video #2, video #2 will load much slower even when you already stopped video #1 (and so on, getting slower and slower for subsequent videos). What you can do is reload the full HTML page, but that's also not too efficient.

One solution for this, which takes either some programming or a blog widget, is to create a special expandable "+ show this video" link, like in this blog's forum. So you won't see the YouTube player right away, but you need to expand this first with a click. What you can do is have an empty "div" element at first, and using JavaScript, you fill it with the embed code when the div is expanded (and you'll set the video to auto-play so that the user doesn't need to click again after expanding). Once expanded, the video starts buffering, but you'll now show an alternative link in place of the old link which reads e.g. "- hide this video". Upon hiding, you'll "delete" the contents of the div element again.

Here's a snippet that handles this. First, the HTML for the "show video" link:

<p class="expander" id="expander1"><a href="javascript:showForumVideo(1, '7gntV6AePOM')">+ Show video</a></p>

The first parameter (the "1") is just enumarated throughout the page, and the second parameter is the YouTube video ID ("7gntV6AePOM"). Below that you'd have something like this empty element:

<p class="expandee" id="expandee1">&nbsp;</p>

You'd set the "expandee" class to "display: none" in your CSS. Now in your JS file you can put something like this (note that the expand/ collapse functions can be useful for other things too, so they're listed separate):

function showForumVideo(n, videoId)
{
    expand(n);
    var elm = document.getElementById("expandee" + n);
    if (elm) {
        elm.innerHTML = "<a href="javascript:hideForumVideo(" + n + ", '" + videoId + "')">- Hide video</a><br />" +
                "<object style="width: 500px; height: 412px"><param name="movie" " +
                "value="http://www.youtube.com/v/" + videoId + "&amp;autoplay=1"></param>" +
                "<embed src="http://www.youtube.com/v/" + videoId + "&amp;autoplay=1" type="application/x-shockwave-flash" " +
                "style="width: 500px; height: 412px"></object>" +
                "<br /><a href="http://youtube.com/watch?v=" + videoId + "" style="color: #888; font-size: 85%">" +
                "youtube.com/watch?v=" + videoId + "</a>";
    }
}

function hideForumVideo(n, videoId)
{
    var elm = document.getElementById("expandee" + n);
    if (elm) {
        elm.innerHTML = "&nbsp;";
    }
    collapse(n);
}

function expand(n)
{
    showElm("expandee" + n);
    hideElm("expander" + n);
}

function collapse(n)
{
    showElm("expander" + n);
    hideElm("expandee" + n);
}

function showElm(name)
{
  var elm = document.getElementById(name);
  if (elm) { elm.style.display = "block"; }
}

function hideElm(name)
{
  var elm = document.getElementById(name);
  if (elm) { elm.style.display = "none"; }
}

It might be worth testing this in different browsers and there may be other ways to fine-tune it, but this might get you started.

[With hat tip to Spreeblick and Ionut!]

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!