Embedding Videos: YouTube in a Thickbox

Technology Tools: Embedding Videos

How to display a YouTube video inside a Thickbox

“Thickbox” is a great way to showcase a youTube video on your web site. Thickbox’s light box effect gives videos a dramatic, theatre-like feel. You only need to add a few extra lines of code to the preset embed code supplied by YouTube.com to show your video inside a “thickbox”. This method works with embed code from youTube.com as well as embed code from other video hosting sites. Click the links below to see some examples.

[youTube Thickbox demo]
[DailyMotion Thickbox demo]
[iMeem Thickbox demo]
[Vimeo Thickbox demo]

Step-by-step Instructions to embed a youTube video inside a Thickbox:

  • Step #1: Download and install jQuery.js and Thickbox 3.

    Download “jquery.js” from jquery.com and Thickbox3 files, “thickbox.js”, “thickbox.css”, “loadingAnimation.gif”, and “macFFhack.png”, from jquery.com/demo/thickbox/. You then need to upload these files to your web server’s root directory or a subdirectory.

    You can skip this step, if “thickbox” came preinstalled with your CMS or blog software, or if you installed a “thickbox” plugin on your site. Please note that if your copy of “Thickbox” came from a gallery plugin, some “thickbox” files may have been altered for that plugin. This can lead to unexpected problems in Internet Explorer. I recommend you install an unaltered copy of “thickbox” on your web server, if you experience Thickbox problems in IE6 or IE7. Just make sure your version of “thickbox” is placed last in the document head as shown in step #3 below.

  • Step #2: Enter a valid DTD on the first line of your html document.

    Thickbox requires a valid document type definition (DTD) in the xhtml document. Most CMS and blog software will automatically put this in for you. However, if you are writing your document from scratch, then you must include a DTD line above your opening <html> tag. If you don’t know what DTD to add, the following code will work for most documents:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    For a list of other DTD's, visit w3.org DTD recommendation page.

  • Step #3: Add “jquery.js” and “thickbox” to your document head.

    Enter the following lines between the <head> and </head> tags in your xhtml document:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="thickbox/thickbox.js"></script>
    <script type="text/javascript"> var tb_pathToImage = "thickbox/loadingAnimation.gif";</script>
    <style type="text/css" media="screen">@import "thickbox/thickbox.css";</style>

    In line #3, “loadingAnimation.gif” is a transition graphic that is displayed before the thickbox appears. You can leave this out, but it is helpful for your visitors to see it when thickbox is slow to load.

    You can skip this step if “Thickbox” came preinstalled with your CMS/blog software or in a plugin and is automatically included in the document head and you don’t want to override those settings.

  • Step #4: Add a unique, hidden <div> in your document body and paste the video embed code inside it.

    In the body of your web page, create a hidden div with a unique id (id="youtubeplayer20") and paste the "embed" code from youtube.com between the <div> and </div> tags. To hide the div, add the style attribute, “style=display:none;” to the opening <div> tag.

    <div id="youtubeplayer-20" style="display:none;">
    <!– start embed code copied directly from youTube.com –>
    <object width="425" height="355">
      <param name="movie" value="http://www.youtube.com/v/YsowqYWs7vU&hl=en"></param>
      <param name="wmode" value="transparent"></param>
      <embed src="http://www.youtube.com/v/YsowqYWs7vU&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed> </object>
    <!– end embed code copied directly from youTube.com –>
    </div>

    Jot down the video dimensions shown in the “embed” code as you will need them in the next step.

    NOTE: Some video hosting sites already put their embed code inside a div (ie. DailyMotion.com). I recommend manually removing that div and any extraneous text inside it and place only the remaining <object>, <param> and <embed> portion inside your hidden <div>.

    6/27/2008 UPDATE: A flash rendering problem on Mac OSX/Firefox1.5+ and Mac OSX/Camino1.6+ causes the youTube video to get covered up by the thickbox itself. To fix, remove the 'wmode=”transparent”' argument from YouTube's <embed> tag. Keep it in the <param> tag only.

  • Step #5: Lastly, in your document body, create an inline "thickbox" link that points to the unique id of the hidden div containing the video embed code.

    Create a Thickbox link for your youTube video by placing anchor tags (<a></a>) around some text or an image. Use the thickbox inline anchor, "#TB_inline" for the "href" and append the thickbox dimensions (>=video size) and the unique id of the hidden div from step#4 as “href” parameters (see thickbox inline content instructions). The link must have a class of “thickbox” and an optional title that is displayed as the Thickbox header.

    <a href="#TB_inline?height=380&width=425&inlineId=youtubeplayer-20"
      class="thickbox" title="My youTube Video">Click here to see my youTube video</a>

    If you don’t know your video dimensions, they are included inside the “embed” code from youTube.

  • And that’s it!

    Here's the entire code in a sample web page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/thickbox/thickbox.js"></script>
    <script type="text/javascript"> var tb_pathToImage = "thickbox/loadingAnimation.gif";</script>
    <style type="text/css" media="screen">@import "js/thickbox/thickbox.css";</style>
    </head>
    <body>
    <h2>YouTube Video in a Thickbox example</h2>
    <div id="youtubeplayer-20" style="display:none;">
    <!– start embed code copied directly from youTube.com –>
    <object width="425" height="355">
      <param name="movie" value="http://www.youtube.com/v/YsowqYWs7vU&hl=en"></param>
      <param name="wmode" value="transparent"></param>
      <embed src="http://www.youtube.com/v/YsowqYWs7vU&hl=en" type="application/x-shockwave-flash" width="425" height="355"></embed>
    </object>
    <!– end embed code copied directly from youTube.com –>
    </div>
    <a href="#TB_inline?height=365&width=425&inlineId=youtubeplayer-20"
      class="thickbox" title="My YouTube Video">Click here to see my youTube video</a>
    </body>
    </html>

    This method works in FF 1.5, FF 2, Safari 1.3*, Safari 3, and IE 6. I have not tested it in other browsers, but it should work fine in any modern browser.

    *Note for Safari 1 users: although this Thickbox “inline” demo works in Safari 1.3, other types of Thickbox 3 functions will not work when combined with any version of jquery greater than version 1.1.2, and the combination, jquery 1.1.3+thickbox3 will cause Safari 1.3 to crash.

Tags: ,

This page was updated on June 13th, 2009 at 8:08 pm by hellioness.


12 Responses to “Embedding Videos: YouTube in a Thickbox”

  1. no avatar

    Hi,

    Thanks for your clear how to. I just test your method and I discovered it won’t work on FF on Mac (OS X 10.5). When I click on the link to view a youtube inside the thickbox, the thickbox screen appears/stays empty. Do you have any idea how to fix this?

    Cheers,
    Wouter

  2. no avatar

    I tested the youTube demo in FireFox on my older OSX 10.3.9 Mac and you are right! OMG I missed that. The videos from dailyMotion and iMeem displays in a thickbox with Firefox on OSX, but NOT youTube videos.
    It turns out that there are known issues with both FireFox and Camino browsers with Embedded Flash/YouTube on OSX. Thickbox seems to exacerbate the problem. I don’t have a solution for you right now. Several users have reported some fixes at this link www.jasongriffey.net/wp/2007/04/03/firefoxosxflash-problem/. But their solutions didn’t have any effect on the thickbox problem, itself. I will do some more tests to see if I can come up with a workable solution.

  3. no avatar

    Wouter,
    I now have a solution for the Mac OS-X FF/YouTube thickbox embed problem. The issue is related to the flash transparency setting, wmode=”transparent” in youTube’s embed code. On a Mac OSX system running Firefox or Camino, this doesn’t work as expected with “inline” thickbox and the video gets covered up by the thickbox itself.

    The fix is to remove 'wmode=”transparent”' from the <embed> tag in YouTube’s embed code (leave it in the <param> tag only). This change corrects the overlap problem in FF and Camino on OSX and has no detrimental impact on youTube thickbox in Safari or FF2 on Windows. IE6 stopped showing the preview image, but the video still works. If you want to learn more about flash’s wmode parameter, here’s the link.

  4. no avatar

    Hi Hellioness,

    That’s it. It works great now > many thanks also!

    Cheers,
    Wouter

  5. no avatar

    I need help fixing a frozen embeded video in Thickbox in IE7
    To see this bug click on the [Vimeo Thickbox demo] link at the top of the page.

    Then watch the video for a few seconds and then close the thickbox.

    Go back and click on the same link.[Vimeo Thickbox demo]

    This is where the bug is. The video doesnt start to play the from the start, instead it is stuck on the last frame before you closed it. The only was to get it to continue is by clicking on the timeline.

    The same happens with the youtube link.
    Does anyone have a fix for this. It only happens in IE7.
    Your help is appreciated!:)

  6. no avatar

    there’s a mistake in step # 5:

    at the end of the first line it reads: inlineId=youtubeplayer20″
    and it should be: inlineId=youtubeplayer-20″
    because that’s the id of the div defined in step #4

  7. no avatar

    Marjorie…The source of your problem is probably a cookie in your browser or your setting at the video hosting site. It is not a problem with embedding itself. Deleting all Vimeo cookies from your browser should reset the video to the beginning.

    Elpopi…thanks for telling me about the typo. I will fix it ASAP.

  8. no avatar

    Hi

    I am having the same problems as Marjorie.

    This works 100% fine in firefox, but it seems to get stuck in IE on the last open frame and then when you re click the link, it plays the video at speed and muted. The only way to put it back to normal is to refresh or click the timeline.

    I think this is a bug in IE, I have been working for a few hours and have not found a work around so I am either going to hope no one clicks it or use a different framework

  9. no avatar

    This was really useful and I got it to work, but I cannot get my swf file to go transparent in any browser. I set the object params and wmode and everything properly, but it is just plain white every time. Anyone have any ideas?

  10. no avatar

    Thank you from saving me from thinking. I didn’t have to troubleshoot a single thing.

  11. no avatar

    I am having an issue with playing thickbox in ie. I can embed the video no problem, but in ie, the video wont’ close using the close button. The javascript is somehow not recognizing it properly. this is the error it gives:

    error: object expected
    URL: http: //www .credit.com/includes/homepage_video.jsp?KeepThis=false&

    It works find in firefox. Any ideas?

    Also, this is how I am showing the video:
    < a href="/includes/homepage_video.jsp?KeepThis=false&TB_iframe=true&height=488&width=488">< /a>

  12. no avatar

    Adria,
    Your question is not relevant to this article as you did not use thickbox’s “inline” method to embed a YouTube video. I can only tell you to check your “custom” player syntax requirements for missing video parameters on the href.

Leave a Reply