This is a message.

HTML Overlays

Place HTML on top of a player

HTML Content

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

Search engine friendly content
standalone demo

This is achieved by setting the wmode Flash property to opaque. After that the Flash object can accept placement and positioning like any other element including the z-index CSS property.

Disadvantages

  • Container tag: To make this work reliably across browsers you must install the player into a DIV tag container element.
  • Browser support: This feature does not work on all Linux distributions and in early versions of Opera.
  • Performance: When you force Flash to composite the HTML layers above and below, you are adding additional processor load.
  • Fullscreen: Overlaid element won't be seen when the video is played fullscreen.

HTML Code

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

<!-- overlaid content -->
<div id="myOverlay">
<h3>HTML Content</h3>
 
<p>
This is a regular <code>DIV</code> element that
is placed on top of the video player.
</p>
</div>
<!-- player container. display:block not needed-->
<div style="width:425px;height:300px;margin:0 auto;" id="player">
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</div>

HTML

Javascript Code

Note the wmode parameter is provided in the second argument - Flash configuration - to the Flowplayer installation call.

flowplayer("player", {
src:"http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
wmode: "opaque" // This allows the HTML to hide the flash content
}, {
clip: {
url: 'http://stream.flowplayer.org/flowplayer-700.flv'
}
});

JavaScript