Page 1 of 1

Video & Rollover links

Posted: Thu Jul 07, 2011 2:08 pm
by mikewooten
Hello,
I have a video on a page with a few rollover links under the video. The popups appear underneath the video. What I would like is for the popups to appear over or ontop of the video.
How can I do that? Is that accomplished with layers or is there another way to get the popup to appear ontop of the video?
Any help would be much appreciated.
Thanks

Below is an example of what the video & links look like
http://www.maxxis.com/Bicycle/Mountain/Ikon.aspx

Here is the code that I am using:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#video {
position:absolute; width:331px; height:330px; z-index:2; left: 241px; top: 129px; background-color: #FFF600;
	}	
#tech_stamps {
position:absolute; width:530px; height:55px; z-index:1; left: 241px; top: 475px; background-color: #00CCFF; 
	}	
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<span style=""></span>
<font color="#00FFFF"></font>
<DIV align=center id="video"><IFRAME height=331 src="http://www.youtube.com/embed/Wu1WHVA-p9k?rel=0" frameBorder=0 width=530 allowfullscreen="">
				</IFRAME></DIV>
				<LINK rel=stylesheet type=text/css href="http://www.maxxis.com/Files/style.css">
<div align="center" id="tech_stamps"><SPAN id=rollover1><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exo_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXO_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover2><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/3C_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/3C-MTN_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover3><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exc_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXC_tech_info.jpg"> </SPAN></A></SPAN></div>
</body>
</html>

Re: Video & Rollover links

Posted: Fri Jul 08, 2011 9:37 am
by Jade
Which browser are you using? They're showing up over the iFrame in Firefox 5.

Re: Video & Rollover links

Posted: Fri Jul 08, 2011 2:09 pm
by mikewooten
I'm on a PC.
I have used Firefox 3.5.9 - They appear under
Internet Explorer 8 - They appear under
Safari - 3.1 - They appear under

Re: Video & Rollover links

Posted: Fri Jul 08, 2011 10:54 pm
by Weirdan
Adding '&wmode=opaque' to the iframe src fixes this isssue (in chrome at least).

Re: Video & Rollover links

Posted: Mon Jul 11, 2011 9:18 am
by mikewooten
Awesome!!!
The '&wmode=opaque' worked in Explorer, Firefox and Safari.
Thank you very much!!! :)