Placing HTML over the player Configuration - Demo 4 / 8

Introduction

It is possible to place HTML elements in front of the Flash movies to prevent the Flash from showing through. This is achieved by setting wmode property to opaque. After that the Flash object can accept placement and positioning like any other element including the the z-index CSS property. Here is an example.

HTML Content

This is a regular DIV element that is placed on top of the video player.

Disadvantages

There are few disadvantages on using method.

• browser support. This feature does not work on all Linux distributions and in early versions of Opera. Linux Ubuntu 8.10 added support for this feature.
• performance. When you force Flash to composite the HTML layers above and below, you are adding additional processor load.
• fullscreen. Overlayed element won't be seen on fullscreen mode

As you can see these are not very severe. Browser support is quite good.

HTML coding

We have placed a regular DIV element before the player container. The DIV is styled with CSS.

<!-- overlayed content -->
<div id="myOverlay">
	<h3>HTML Content</h3>

	<p>
		This is a regular </samp>DIV</samp> element that is placed on top of the video player.
	</p>
</div>

<!-- player container-->
<a
	href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"
	style="display:block;width:425px;height:300px;"
	id="player">

	<!-- splash image inside the container -->
	<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />

</a>

JavaScript coding

The wmode parameter is given on the second argument to the Flowplayer installation call.

flowplayer("player", {src: "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", wmode: 'opaque'});