IT Blog » youtube http://www.techfromhel.com Information Technology - our Life Tue, 26 Jul 2011 13:21:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 YouTube in a Thickbox http://www.techfromhel.com/2008/05/youtube-video-thickbox/ http://www.techfromhel.com/2008/05/youtube-video-thickbox/#comments Fri, 30 May 2008 13:54:26 +0000 admin http://www.techfromhel.com/?p=4 Note: This is a duplicate of an article I originally wrote on April 29, 2008 on the Supernatural Station website.

“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 [...]]]>

Embedding Videos: YouTube in a Thickbox

Note: This is a duplicate of an article I originally wrote on April 29, 2008 on the Supernatural Station website.

“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.

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 from the viewer until they click the link specified in step #5 below, 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 (ex. 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=youtubeplayer20"
    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″   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.

]]> http://www.techfromhel.com/2008/05/youtube-video-thickbox/feed/ 0