All tag results for ‘embedding videos’

Embedding Videos: YouTube in a Thickbox

April 29th, 2008

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]

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

Read the rest of this entry »

Tags: , , | 3 Comments »

Embedding Videos: Flv in a Thickbox

September 6th, 2007

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:

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

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

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

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

    For more detailed information on setting up a video thickbox, see my article: youTube Videos in a Thickbox.

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

Tags: , , | 12 Comments »