Easily add multiple lightbox style popup videos to your page using Flowplayer and jQuery Tools Overlay

Adding a video to your page is easy enough by embedding directly or by using something like flashembed to embed Flash. What we needed to do was have multiple links on a page that would each open specific videos, whilst still keep the same generic JavaScript somewhere in a separate page template file. The accompanying CSS also had to stay in a separate CSS file and also needed to be generic. Our videos were all in .FLV format and needed to pop over the content in a nice overlay so as not to disturb the flow of the page.

Blacktrash have a nice demo of the kind of functionality we needed but it wasn’t quite generic enough to manage our very different sized videos. The code below, based on this example using Flowplayer and jQuery Tools Overlay, is simple enough that you can easily add multiple videos to a page. The size of the video player is determined by the html5 style attributes “data-width” and “data-height” on each “a” link which are picked up by jQuery and used to resize the player. If you do not specify these then the default is used, as given by the CSS.


<html>
<head>
<!-- include the flowplayer, jQuery and jQuery Tools libraries -->
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js" type="text/javascript" charset="utf-8"></script>

<!-- set up the flowplayer to play videos in an overlay using jQuery Tools Overlay -->
<script type="text/javascript">
  $(function () {
    var player;
    $("a[rel]").overlay({
      mask: {
        color: '#000',
        opacity: 0.2
      },
      onLoad: function () {
		// create player object and load in the href of the link clicked as the source of the video
	    player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf",this.getTrigger().attr("href"));
		player.load();
		// set the height and width based on data-height and data-width
		$("#player").height(this.getTrigger().attr("data-height"));
		$("#player").width(this.getTrigger().attr("data-width"));
      },
      onClose: function () {
        player.unload();
      }
    });
  });
</script>

<!-- set up the CSS to hide the overlay by default and set up default height and width for the player -->
<style>
#overlay {
      display: none;
      padding: 40px;
    }
    .close {
      background:url(http://flowplayer.org/media/img/overlay/close.png) no-repeat;
      position:absolute;
      top:2px;
      right:5px;
      display:block;
      width:35px;
      height:35px;
      cursor:pointer;
    }
    #player {
      display: block;
      width: 600px;
      height: 300px;
      margin: 0;
    }
    #player *:focus {
      outline-style: none;
    }
</style>
</head>
<body>

<!-- each link contains a reference to the video to be played in flowplayer, the JavaScript above ensures they are played in an overlay -->
<a rel="#overlay" href="http://www.sitename.com/video/video1.flv">Video 1</a>
<a rel="#overlay" href="http://www.sitename.com/video/video800x600.flv" data-height="600" data-width="800">800x600 Video</a>

<!-- the overlay <div> itself is empty apart from a &amp;nbsp; and hidden using CSS to make sure it isn't shown on screen -->
<div id="overlay"><a class="close"></a><div id="player">&amp;nbsp;</div></div>

</body>
</html>

You can do a lot more with flowplayer and overlays so this is just a starting point but the approach is generic enough that any of the web team can add nice popup videos to a page just by adding a simple “a” link.

One thought on “Easily add multiple lightbox style popup videos to your page using Flowplayer and jQuery Tools Overlay

  1. I’m testing out using this code with separate linked css and js pages to be able to link to and open multiple video overlays (one at a time) on same page.
    The code isn’t paying attention to overlay player height and width params, nor does it display ‘close’ option. What am I doing wrong?
    Here’s the page code:

    Cecilia Dougherty – video

    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */

    contact Cecilia Dougherty

    video
    book
    blog
    photography
    writing
    upcoming
    cv

    click on the links to watch these videos

    <!– the overlay itself is empty apart from a &nbsp; and hidden using CSS to make sure it isn’t shown on screen –>
    &nbsp

    Joe (2014-15 in progress)
    Occupy Wall Street Redux (2011, silent)
    In A Station, Petals (2011, installation)
    The Fourth Space (2010, installation)
    The Scenography (2010, animation)
    The Third Interval (2010)
    Tetragrammaton (2010, installation)
    Supertasking (2009)
    The Third Space (2009)
    Writers Series (1998 – 2004)
    Gone (2001, installation)
    My Failure to Assimilate (1995)
    Joe-Joe (1993)
    In flux (1993)
    The Drama of the Gifted Child (1992)
    Coal Miner’s Granddaughter (1991)
    Grapefruit (1989)
    Claudia (1987)

    for complete videography, please click on the cv link

    This site is copyrighted to Cecilia Dougherty, 2014
    cecilia.dougherty@gmail.com

    Here’s the css on separate page:
    @charset “UTF-8″;
    /* CSS Document */

    #overlay {
    display: none;
    padding: 40px;
    }
    .close {
    background:50%;
    position:fixed;
    top:10px;
    right:15px;
    display:block;
    width:35px;
    height:35px;
    cursor:pointer;
    }
    #player {
    display: block;
    width: 500px;
    height: 281px;
    margin: 0;
    }
    #player *:focus {
    outline-style: none;
    }

    Here’s the js on separate page:
    // JavaScript Document

    $(function () {
    var player;
    $(“a[rel]“).overlay({
    mask: {
    color: ‘#000′,
    opacity: 0.4
    },
    onLoad: function () {
    // create player object and load in the href of the link clicked as the source of the video
    player = $f(“player”, “http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf”,this.getTrigger().attr(“href”));
    player.load();
    // set the height and width based on data-height and data-width
    $(“#player”).height(this.getTrigger().attr(“data-height”));
    $(“#player”).width(this.getTrigger().attr(“data-width”));
    },
    onClose: function () {
    player.unload();
    }
    });
    });

    Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>