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 section

   jquery.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 head

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

   The <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 class="thickbox" to display the video inside a thickbox

   Use 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"
      class="thickbox" 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:

<!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>
<style type="text/css" media="screen">@import "js/thickbox/thickbox.css";</style>
<script type="text/javascript"> var tb_pathToImage = "thickbox/loadingAnimation.gif";</script>
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<h2>Flv Video in a Thickbox example</h2>
<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>
<a href="#TB_inline?height=270&width=320&inlineId=onPageHiddenContent-20"
 class="thickbox" title="My Video">Click here to see video</a>
</body>
</html>

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.

Click here to see a demo.

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.