beacon site | contact | (866) 488-3620
Thomas

Slick Pop-up Video Player using GreyBox & Flowplayer

Both GreyBox and Flowplayer are free third-party resources for pop-ups windows and online video, respectively.  Combining the two makes a great video player that is easy to maintain and design.

Download the source files:

Both will be packaged in ZIP files.  Unpack them and place their contents into their respective directories as shown below:

You will also need to add a folder called ‘videos’ unless you choose to deviate from this tutorial.  Your index file will be a page with the links to the video.  First, open your index file or whatever page you are working with that will display link to the pop-up videos.    These lines of code are required in the <head> tag to get GreyBox to work:

<head> <script>var GB_ROOT_DIR = "/greybox/";</script> <script src="greybox/AJS.js"></script> <script src="greybox/AJS_fx.js"></script> <script src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> </head>

Then, within the body of your document, set up links or image links using this format or similar format found on the GreyBox useage page:

<a rel="gb_page_center[560, 450]" title="NAME OF POPUP TITLE" href="player.html?filename=videos/VIDEO_FILENAME">

You can set your own title up here or your own popup window size.  All of your anchor tags will refer to the document specified in the ‘href’ attribute, which we will create next.  This prevents us from making a new HTML file for every video you may have on your link page.   Create an HTML file in the same directory as your video links page (index.html in this example) and name it ‘player.html’.  This page will dynamically (using JavaScript) to serve the video based on the filename provided in the links page anchor tag. These lines are needed to get the Flowplayer working within the GreyBox popup:

<html> <head>  <script src="flowplayer/flowplayer-3.2.4.min.js"></script> </head> <body> <script>  var page = window.location.href;  var position = page.indexOf("filename=");  page = page.substr(position+9);  document.write("<a href='");  document.write(page);  document.write("' id='player'></a>"); </script> <script>  flowplayer("player", "flowplayer/flowplayer-3.2.5.swf"); </script> </body> </html>

The dynamic page allows you to just modify your anchor tags ‘href’ attribute in the file that calls the player page.   This page can also be written in ASPX or PHP pages to accomodate your site.  If this is the case, the JavaScript can be replaced with code to get the filename variable from the URL. Your directory should now have a setup like the following:

The index page will look something like this in a browser:

And once the link is clicked, you should get a pop-up player that looks like this:

5 Comments

  1. Michelle
    Posted July 22, 2011 at 11:02 am | Permalink

    I am not a developer. I am trying to get the greybox to play a flv video. i am able to get the greybox to appear when i click the link, but no video player appears. was i supposed to change some titles or paths? please reply to my email address.

    thank you for your help so far!!

  2. Posted August 1, 2011 at 5:31 am | Permalink

    Sorry for the delayed response—I just got back from vacation.

    The Greybox link should point to an HTML file that contains the markup for the Flowplayer. If you’ve got the Greybox showing, I believe you should only need to change the HREF attribute (of links using Greybox popups) to the path of the HTML file that contains the Flowplayer (embed/object tags).

  3. Jason
    Posted August 27, 2012 at 1:45 pm | Permalink

    This does not work at all. I did everything exact and even tried a bunch of variations and all it does it popup a blank white page in a new tab. No popup on screen and no video playing.

  4. Rizwan
    Posted October 11, 2012 at 4:53 pm | Permalink

    I am doing it step by step but i am unable to get a video pop up screen.. can you explain it in much more detail please?
    thanks

  5. Posted October 17, 2012 at 4:23 am | Permalink

    I have it working by updating the script on this page:

    1. index.html – in the head tag:

    2. index.html – close the a tag.

Leave a Reply