You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Overlaying videos JavaScript Tools - Demo 1 / 5

Overlayed video

This has been a requested feature for Flowplayer. We took it a little further and made a general purpose JavaScript tool for performing overlays. It can overlay any HTML, not just videos. The documentation for this tool can be found here. Here we demonstrate how to overlay videos:

 

HTML Coding

Here we have a button that triggers the overlay and the actual overlayed element: 

<!-- button that opens up overlay -->
<p>
	<button href="#" rel="div.overlay">Open overlayed video</button>
</p>


<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay" style="background-image:url('/img/overlay/white.png')">

	<!-- flowplayer container -->
	<a id="player" href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-960.mp4">
	
		<!-- some initial content so that player is not loaded upon page load -->
		&nbsp;
	</a>
</div>

JavaScript coding

This is our JavaScript code placed inside SCRIPT tags after previous HTML code: 

$(function() {

	// install flowplayer into flowplayer container
	var player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf");
	
	// setup button action. it will fire our overlay 
	$("button[rel]").overlay({
		
		// use the Apple effect for overlay
		effect: 'apple',
		
		// when overlay is opened, load our player
		onLoad: function() {
			player.load();
		},
		
		// when overlay is closed, unload our player
		onClose: function() {
			player.unload();
		}
	});
			
});

Overlay visuals are done with CSS. If you are using Firefox, you can use tools such as Firebug to investigate how our overlays are done. Consult overlay documentation for more details.

Show me this demo as a standalone version. Here is another standalone example with two overlayed videos.