Flowplayer · Overlay fancyBox

Click below to launch Flowplayer in an overlay by fancyBox using the overlay plugin with its fancybox vendor components.

<head/>

How to load the assets for Flowplayer in a fancyBox:

<!-- the player skin as usual -->
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/skin/skin.css">
<!-- Add fancyBox main stylesheet -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<!-- the overlay plugin fancybox vendor stylesheet -->
<link rel="stylesheet"
href="//releases.flowplayer.org/overlay/vendors/flowplayer.overlay.fancybox.css">
 
<!-- ... -->
<!-- the jQuery library -->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- the Flowplayer script as usual -->
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- The hlsjs plugin for playback of HLS without Flash in modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<!-- the fancybox script -->
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<!-- the overlay plugin -->
<script src="//releases.flowplayer.org/overlay/flowplayer.overlay.min.js"></script>
<!-- the overlay plugin fancybox vendor script -->
<script src="//releases.flowplayer.org/overlay/vendors/flowplayer.overlay.fancybox.js"></script>

HTML

<style>

Styling of the trigger elements:

ul.triggers {
color: #00a6bc;
list-style: none;
font-size: 18px;
width: 7em;
margin-left: 7em;
}
ul.triggers li {
cursor: pointer;
background: url(//d12zt1n3pd4xhr.cloudfront.net/fp/img/fp5arrow.png) 0 2px no-repeat;
padding-left: 24px;
margin: 0.5ex 0;
}
ul.triggers li:hover {
color: #111;
}

CSS

<script>

Here all player containers and players are created and bound to their respective overlay trigger elements via JavaScript. The hard work is done by the Overlay plugin components and fancyBox.

$(function() {
 
var cdn = "//edge.flowplayer.org/";
 
// videos are named night1 thru night7
// cycle through trigger elements with id="clip basename" each
$("ul.triggers:first > li").each(function (i, triggerEl) {
 
// obtain clip base name from id attribute of trigger
// and create a container element
var clipName = $(triggerEl).attr("id"),
container = $("<div/>");
 
// append container to body
$("body").append(container);
 
// install flowplayer with overlay plugin into container
flowplayer(container, {
overlay: {
vendor: "fancybox",
trigger: "#" + clipName
},
hlsQualities: [-1, 1, 3, 6, 7],
ratio: 9/16,
clip: {
sources: [
{ type: "application/x-mpegurl", src: cdn + clipName + ".m3u8" },
{ type: "video/mp4", src: cdn + clipName + ".mp4" }
]
}
});
 
});
 
});

JavaScript

<body/>

The trigger elements:

<ul class="triggers">
<li id="night1">Video 1</li>
<li id="night2">Video 2</li>
<li id="night3">Video 3</li>
<li id="night4">Video 4</li>
<li id="night5">Video 5</li>
<li id="night6">Video 6</li>
<li id="night7">Video 7</li>
</ul>

HTML

See also these overlay alternatives:

The overlay plugin takes care that the player is properly loaded/unloaded the corresponding (before)load/(before)close events of the overlay. This is mandatory to avoid video buffering or playin in the background and prevents errors when the Flash engine is running, especially in Internet Explorer.