For those of you wondering how to implement JW’s Flv player inside [...]]]> Embedding Videos: Flv Videos in a Thickbox

NOTE: This is an updated version of an article I originally wrote on September 6, 2007 that was posted on SupernaturalStation.org.

Step-by-step instructions on how to display a flash video (.flv) inside a thickbox* using JW’s Flvplayer

For those of you wondering how to implement JW’s Flv player inside a Thickbox, it is actually quite simple. Here’s how:

1. If you don’t already have them, download jquery and ThickBox 3 and add them to your page’s head sectionjquery.js is available at docs.jquery.com/Downloading_jQuery. ThickBox 3.1 is a group of files and images (thickbox.js, thickbox-compressed.js, thickbox.css, loadingAnimation.gif, and macFFhack.png) located at jquery.com/demos/thickbox. Download all the Thickbox files and install them in a single common directory, “thickbox”, on your web server.In your document head, add javascript links to jquery.js and thickbox.js, a style link for thickbox.css, and a javascript variable definition that points to “loadinganimation.gif”, a graphic that displays when thickbox is slow to load.
   

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

   Note: If your web site is on a slow server or if you just want to keep your page load speed fast, you can replace jquery.js and thickbox.js with their faster loading, compressed versions, jquery-packed.js and thickbox-compressed.js, respectively.

2. Next, download JW’s Flv Player or Media Player and add the included swfobject.js file to your page headFlv Player (or Media Player) can be downloaded from www.jeroenwijering.com. Save the files, flvplayer.swf (or mediaplayer.swf) and swfobject.js, to your web server, then add a javascript link to swfobject.js in your page’s head section

   <script type="text/javascript" src="swfobject.js"></script>

   Note: If page load speed is an issue, you can omit “swfobject.js” from the document head. swfobject.js is not actually used in this demo. It is only included because of the slight chance that Flv player has an internal reference to it.

3. Then, in the body of your page create a hidden <div> with a unique id and embed the video thereThe <div> should have a unique id=”onPageHiddenContent-20″ and a style attribute of style=”display:none;” to keep it hidden until the viewer clicks on a link that you specify in step #4 below. Inside the <div>, place an <embed> tag to embed JW’s Flv Player, flvplayer.swf, that you downloaded in step #2. List your flv video (myvideo_file.flv) and your video preview image (myvideo_image.jpg) as “flashvars” arguments in the embed tag. See JW’s readme instructions for more details about embedding a video with flvplayer.swf.
   

   <div id=”onPageHiddenContent-20″ style=”display:none;”>
   <embed src=”http://www.myfileserver.com/folder/flvplayer.swf”
   width=”320″ height=”260″ type=”application/x-shockwave-flash”
   pluginspage=”http://www.macromedia.com/go/getflashplayer”
   flashvars=”file=http://www.myfileserver.com/folder/myvideo_file.flv&image=http://www.myfileserver.com/folder/myvideo_image.jpg” />
   </div>

   In the above code, change the url paths, rename myvideo_file.flv and myvideo_image.jpg to match your own video and adjust the height and width as needed. You will also want to make sure that height=video_height+20px to make room for the controller.

4. Lastly, add a thickbox link element with to display the video inside a thickboxUse the thickbox inline* anchor, “#TB_inline” for the “href” and include the thickbox dimensions (>=video size) and your hidden div id as query parameters. The link can surrounded any text or an image. See thickbox inline content instructions for more information.
   

   <a href=”#TB_inline?height=270&width=320&inlineId=onPageHiddenContent-20″
   title=”My Video”>Click here to see video</a>

And thats all there is to it folks! Simple, eh?

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

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

As for you purists out there, yes…”embed” is not xhtml compliant, but all modern browsers support it and that’s more important to your site visitors.

**Note: Please note that Thickbox no longer works in Safari 1 when combined with any version of jquery greater than version 1.1.2 and the combination, jquery 1.1.3+thickbox3, actually causes Safari 1 to crash.

*Important Note: This “inline”, javascript-free method of embedding a flv video in a thickbox is appropriate for simple web pages with just a few videos. If your document has many videos or other flash content that affects z-index and transparency settings, an “inline” thickbox will be problematic, especially in IE. A better solution would be to embed your video in external document/popup player that you can open in a thickbox “iframe” instead.

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