Embedding Videos: Flv in a Thickbox
Technology Tools: Embedding Videos
How to display a flash video (.flv) inside a thickbox with JW's Flvplayer
For those of you wondering how to implement JW's Flv player inside a Thickbox, it’s actually quite simple. Here’s how:
- If you don’t already have them, download jquery and ThickBox 3 from jquery.com and add them to your page's head section:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<style type="text/css" media="screen">@import "thickbox/thickbox.css";</style> - Also add swfobject.js (included with JW's Flv Player or Media Player) to your page head:
<script type="text/javascript" src="swfobject.js"></script> - Then, in the body of your page create a hidden <div> with a unique id="onPageHiddenContent" and "embed" the video there (see JW's readme instructions):
<div id="onPageHiddenContent" 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/video_file.flv&image=http://www.myfileserver.com/folder/preview_image.jpg” />
</div>Just change the url paths, rename video_file.flv and preview_image.jpg, and adjust the height and width to match your own files. You will also want to make sure that height=video_height+20px to make room for the controller.
- Lastly, add a 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. (see thickbox inline content instructions):
<a href="#TB_inline?height=270&width=320&inlineId=onPageHiddenContent"
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” src="js/swfobject.js"></script>
</head>
<body>
<h2>Flv Video in a Thickbox example</h2>
<div id="onPageHiddenContent" 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/video_file.flv&image=http://www.myfileserver.com/folder/preview_image.jpg" />
</div>
<a href="#TB_inline?height=270&width=320&inlineId=onPageHiddenContent"
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.
A updated version of this article is now available on my tech-only site Tech from Hel.
*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.
Related Page: youTube Videos in a Thickbox.
Blog (RSS)
kathrin
Feb 5th, 2008 at 4:21 am
your demo doesn t work in IE 6 & 7
hellioness
Feb 5th, 2008 at 10:53 am
Sorry about that. One of my Wordpress plugins was interfering with the demo. It should work now.
gabe
Mar 6th, 2008 at 2:22 pm
Still doesn’t work in IE6
hellioness
Mar 7th, 2008 at 8:42 pm
Strange. Works fine in IE6 when I test it. Please try again and make sure that you allow “Active Content” for this site and have the latest Adobe flash plugin installed.
kreegee
Apr 2nd, 2008 at 9:25 am
Why do you include the swfobject if you don’t use swfobject?
hellioness
Apr 2nd, 2008 at 3:42 pm
Heh. heh. I wondered if anyone would notice that. Good eye! swfobject.js is not needed in this demo because I did not use javascript to embed the video. I left it in just in case JW’s player referenced it internally (probably not) and there’s no harm in having it.
If anyone would like to know how to how to use swfobject.js and javacript to embed a flv video in a more “compliant” way, here’s a tutorial by JW.
hellioness
Apr 5th, 2008 at 3:01 pm
Nikita,
I got your email and I am sorry you had trouble with my instructions. Here is the list of essential files you need:
1. jquery.js from docs.jquery.com/Downloading_jQuery
2. thickbox.js from jquery.com/demos/thickbox/
3. thickbox.css from jquery.com/demos/thickbox/
4. flvplayer.swf (or mediaplayer.swf) from www.jeroenwijering.com
5. your video file (.flv format).
optional: a preview image (.jpg) file for your video.
The “jquery” and “thickbox” files can be anywhere on your web server…in the root directory or a subdirectory. You just need to specify the appropriate url paths in your document head.
The video player (flvplayer.swf), your video, and your video preview image should be kept together in one location. That location can be in any directory on your web server or on a remote file server. The full url paths to these files must to specified in the <embed> tag in your document body.
I hope this helps.
J. Peter
Apr 6th, 2008 at 12:53 am
Greetings. I am looking for a developer to create an easy link and player. Provide instructions for me and test my site. I need to open FLV movies in an 800×600 screen, with a cool player, and have the background darken for both Firefox and IE 6 and 7. I think this is the way to go with Thickbox. But if I am wrong, please let me know. Contact me… it’s not a big project, but an important one.
hellioness
Apr 11th, 2008 at 1:58 am
My apologies to those of you who were unable to view my demo in the past 2 days. The free remote file server that I had it stored on went down yesterday. I moved the files, so the demo should now be working again.
Happy
Apr 12th, 2008 at 10:17 am
This is exactly what I was looking for.
However, I have got a small query. I have page full of thumbnails that will show corresponding FLV movies. I dont want to reload the page, and just want to use jquery/thickbox combination to open a pop-up and use JW Media Player.
Is there an easy way to do it. Or I have to code the following for every (100+) thumbnails.
hellioness
Apr 13th, 2008 at 8:49 am
Happy…the answer is yes, you do have to recode the href links on all your thumbnails. But not only that, you also have to add 100+ unique, hidden <div>'s to embed each one of those videos.
You are better off using javascript to embed the videos in your case. The simpliest method would be to use javascript to embed the video with an “onclick” event on the thumbnail link…but from my own experience, that never works consistently across browsers with “thickbox”.
I don’t know how you currently display your videos, but if you have a popup player, you can keep using it and just recode your links to put it in a “thickbox”.
If you don’t have a popup player, you can create one by writing a new html document (video-popup.html) with a single <embed> tag within a <div> tag in the page body (not hidden, though) with JW’s flvplayer and a default video in it. In the document head, you would use javacript and swfobject.js to do a video embed to replace the default video with a video that you specify from the originating link. I won’t say how to do that here. Go JW’s site for those instructions.
Then, on your original page, you would recode all your video links to look like this:
The parameters after the video file name opens “video-popup.html” inside a “thickbox” window and must come last in the parameters list. I actually use a variation of this method on the Games & Quizzes page on this site.
Though this method may seem complicated, it’s actually quite straightforward. I plan to outline this process in more detail in an upcoming post about “jquery media plugin”.
hellioness
Apr 16th, 2008 at 5:37 pm
J Peter…Your project sounds intriguing and I am definitely interested.
Thickbox can do the job you describe and it’s open license makes it freely usable in your context. You should know, however, that “thickbox” doesn’t actually open up a new window. What it does is open an “iframe” or a “div” in the current window. This means that the “thickbox” dimensions will always be restricted to the width of the original browser window. If those dimensions are smaller than 800×600, then “thickbox” will be too, though it will automatically add scrollbars so that all it’s content is fully viewable.
I will send you an email with this info. Just reply to it, if you still want my help.
Brandon
May 30th, 2008 at 4:58 pm
Ok, I followed all the steps, but for some reason whenever I open the page in IE 6,7, or 8 it doesnt render properly. The video doesnt load, and it seems to fall behind all the other FLASH content on the website. I was wondering if you could help.
If I put the code at the top right after BODY, the rest of the website disappears. If I put it at the bottom right before I close BODY, it only works in Firefox 2, what do you think is causing this?
This is the code Im using:
hellioness
Jun 1st, 2008 at 2:23 pm
Brandon,
I don’t see your code, but based on your description, I’d say that the “inline” method in this article was not the right choice for you. “inline” thickbox is appropriate for simple web pages only. For more complicated pages, like those with flash or other content that affects z-index and transparency settings, thickbox’s “iframe” method is a better choice.
Thickbox’s “iframe” method requires that the flash video is embedded on a separate page that thickbox can open in an iframe. Since using javascript to embed videos is outside the scope of this article, here is how you would do this without javascript: Create a new page with your flv video embedded in it. You can use the demo code above, but you need to remove the
style="display:none;"from the opening <div> and omit the thickbox link <a href=…>…</a> and the thickbox files from the document head because they are not needed here. Save the page as “myvideo.html”. Please note that the only content on this page are the <div> and the <embed> tags in the page body. There should be no navigation menus, no sidebar, no header, no footer, and definitely no ads. Then on the page where you want to open the thickbox video, add the thickbox files to the document head, omit the hidden<div>and the video <embed> tag, and add a thickbox link in the page body. In place of href=”#TB_inline&inlineId=onPageHiddenContent…”, use href=”myvideo.html&TB_iframe=true…”, instead. Here is the complete syntax of the thickbox iframe link:Change the URL for “http://www.mysite.com/videos/myvideo.html” and the thickbox dimensions as needed.
FYI. The next time you need to add code inside a comment in a WordPress blog, you should surround it with <code></code> tags or it will be deleted.
Brandon Chatham
Jun 2nd, 2008 at 7:16 pm
That did the trick, thank you!
However, now I have another issue. Whenever I click on the link, a small RED X appears in the black box for a few seconds, right before it loads the video. Is there anyway I can get rid of this RED X from showing up?
A black screen would be great, or a message that says its loading, anything but a RED X for 1-3 seconds.
Thanks again for all your help.
hellioness
Jun 3rd, 2008 at 12:30 am
The X is caused by a missing loading image that thickbox tries to display. There are two image files that thickbox needs: “loadingAnimation.gif” and “macFFhack.png”. Download these from jquery.com/demo/thickbox/ and put them in the same directory as “thickbox.css” on your web server. Then, in your page head, add this line to tell thickbox where to find “loadingAnimation.gif”:
Brandon Chatham
Jun 3rd, 2008 at 11:14 pm
It worked, thank you so much. Hey, is there anyway I could send you a donation for your help, I appreciate it.
B
hellioness
Jun 4th, 2008 at 4:26 pm
Thank you! I pay for this site out-of-pocket, so any help is appreciated. There is a PayPal “Donate” button now in the footer. You can also buy some of the Supernatural merchandise shown in the sidebar, though I get only a few pennies from that.
Brandon Chatham
Jun 4th, 2008 at 8:53 pm
Thanks for adding the Donate button, you definitely deserve it.
I have one last question for you:
Do you know how to call a thickbox iframe from a flash movie?
I found a few websites that explain how to do it, but none of them make sense.
Thanks.
hellioness
Jun 5th, 2008 at 12:28 am
Thickbox provides a function called
tb_show('title','url¶meters','related|false')that you can use to call thickbox directly from javascript. This is what you need for your link inside a flash movie. I don’t have any experience putting links in flash, but if it is similar to a regular javascript link, the format would look something like:Change the video title, the URL and the thickbox dimensions as needed.
I read an article about this at PrionInteractive.com. Though I didn’t agree with the syntax or modifications to thickbox, the author seemed to know how to put a javascript link inside flash.
Juan Antonio
Jun 27th, 2008 at 12:49 pm
Wooooowww!! tb_show function just find this, tnks.
hellioness
Jul 3rd, 2008 at 11:22 am
Comments are now closed. You may post new comments and questions related to this article here, instead.