Member Avatar for MDGM

Hi all,

I need to have a semi transparent picture hovering over a windows media player plugin video. How do i do this? Html preferably...

Thanks,
Max

  • 3 Contributors
  • 5 Replies
  • 144 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MDGM

Dani AI

Generated

A quick, practical follow-up to the working example posted (and the position:relative fix): that overlay technique is fine for many cases, but two issues commonly bite you when stacking HTML over a plugin-hosted player — the plugin may render in a separate native window (so HTML layers can never appear above it), and older browser/plugin combos treat click events differently. The replies here solved the simple layout; the notes below cover reliable ways to make it robust and modern.

If you must stick with the Windows Media Player control, enable its windowless rendering so the browser compositor can layer HTML on top. When using an <object>/<embed> wrapper for the WMP control, add the windowlessVideo parameter (supported by many versions of the WMP control):

<object ...>
  <param name="windowlessVideo" value="true" />
  <!-- other params -->
</object>

If it is acceptable to update the page, prefer HTML5 video. With <video> you get consistent layering, CSS opacity, and easy click handling. Example pattern (minimal):

<div class="video-wrap">
  <video src="movie.mp4" controls></video>
  <img class="overlay" src="overlay.png" alt="">
</div>
.video-wrap { position: relative; display: inline-block; }
.video-wrap .overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; opacity: 0.5;
  pointer-events: none; /* allow clicks through to the video */
}

Troubleshooting tips: test in the real target browsers (some plugins never go windowless), use pointer-events: none on non-interactive overlays so clicks reach the player, and keep a fallback (static poster or link) for environments without the plugin. If long-term support matters, convert to HTML5 delivery (MP4/WebM) so overlays work consistently across modern browsers.

Recommended Answers

All 5 Replies

Member Avatar for Member #46692

You mean something like this?

Member Avatar for digital-ether

Hi all,

I need to have a semi transparent picture hovering over a windows media player plugin video. How do i do this? Html preferably...

Thanks,
Max

Heres an example of how you will achieve this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image overlay over Windows Media Player Plugin</title>

<style type="text/css">
<!--

.wmp_wrap {
	/* position fixed allows you to */
	/* absolutely position child elements */
	/* relative to this element */
	position: fixed;
}

.wmp_overlay {
	/* positioning */
	z-index: 1000;
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	/* dimensions */
	width: [width of embed];
	height: [height of embed];
	/* transparency */
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
}

.wmp_wrap embed {
	
}

-->
</style>


</head>

<body>

<div class="wmp_wrap">
<img class="wmp_overlay" src="ajaxchat_box_101.png" />
<embed ...>Some example Text. Replace with your WMP Plugin</embed>
</div>

</body>
</html>

What I did was create a DIV to wrap WMP and the IMAGE overlay.
The wrapper DIV is has the the position: fixed. This allows all child Nodes/Elements to be positioned absolutely, relative to this DIV.

Then just position your Image absolutely inside the wrapper DIV and it will overlay the <embed> (WMP) that is inside the wrapper also.

There are a few things that will cause problems with this:

1) You may need to use .png files (support 24-Bit Alpha transparency ie: layers) as .gif sucks at transparency. (Binary Transparency ie: single tranparent color). However some versions of IE have problems with 24-Bit PNG trasparency, there are IE specific solutions to this.

2) A plugin is not really an HTML node, so it will not respect the z-index layering of the HTML elements... This can also be fixed with a few hacks..

Hope that starts you off...

commented: Nice explanation as always (iamthwee) +6
Member Avatar for MDGM

Perfect, thanks! The code works perfectly and ty for the detailed explanation - i dont understand embeds or css but i do better now :mrgreen:

Member Avatar for digital-ether

I think there is a typo there with position:fixed;

It should have been position:relative;

.wmp_wrap {
	/* position relative allows you to */
	/* absolutely position child elements */
	/* relative to this element */
	position: relative;
}

Thanks Urolicious for pointing that one out ;)

Member Avatar for MDGM

yeh i was adding the code with my brother and he spotted it so i changed it. sorry for not mentioning! i didnt think it would help :s anyway, thanks again for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.