7 Replies - 4224 Views - Last Post: 24 November 2010 - 03:44 AM

#1 Gorian   User is offline

  • ninja DIC
  • member icon


Reputation: 154
  • View blog
  • Posts: 1,856
  • Joined: 28-June 08

Flash video overlaps CSS Menus

Posted 23 November 2010 - 06:51 PM

So, I have a page with a flash video embedded in it. The page also has CSS menus. I have given the menus a z-index of 1000, and 999 (their are 2 separate menus on the page). In firefox, (I am using the latest beta) this works fine, and the CSS menu overlaps the flash object. However it does not work in Chrome or IE8. I have googled the problem, and found suggestions of using wmode="transparent", however that doesn't seem to work. Is there any other effective way of fixing this problem? There is a lot of code, and this problem seems a bit more generic than specific, but I can post some if needed...

Is This A Good Question/Topic? 0
  • +

Replies To: Flash video overlaps CSS Menus

#2 Shado3225   User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 12:35 AM

Yes please post the code.
Was This Post Helpful? 0
  • +
  • -

#3 Gorian   User is offline

  • ninja DIC
  • member icon


Reputation: 154
  • View blog
  • Posts: 1,856
  • Joined: 28-June 08

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 12:42 AM

Roger that.

CSS:
body,td,th {
	color: #000000;
}

body {
	background-color: #000000;
}
a:link {
	color: #98FB98;
    text-decoration: none;
	cursor: pointer;
}
a:visited {
	color: #98FB98;
    text-decoration: none;
}
a:hover {
	color: #87CEEB;
    text-decoration: none;
}
a:active {
	color: #FF0000;
    text-decoration: none;
}

/*
strong {
	color: #FFFFFF;
}
*/

/*classes*/

.row1 {
	width: 300px;

}

.row2 {
	width: 300px;

}


.row3 {
	width: 300px;

}

.bottom_spacer{
	height: 60px;
	width: 100%;
}

.ImgSvCont {

}

/*End Classes*/

#container {
	min-width: 70%;
	min-height: auto;
}

#top_col {
	background-color: #AFAFAF;
	position: absolute;
	top: 0;
	right: 15%;
	left: 15%;
	height:100px;
	z-index: 2;
}

#left_col {
	background-color: #000000;
	float: left;
	width: 150px;
	height: 1em;
	
}

#right_col {
	background-color: #000000;
	float: right;
	width: 150px;	
	height: 1em;
}

#page_content {
	background-color: #FFFFFF;
	outline-width: thin;
	outline-style: ridge;
	right: 15%;
	left: 15%;
	position: absolute;
	min-height: 99.1%;
	height: auto;
	z-index: 1;
	overflow: hidden;
}

#bot_col {
	background-color: #598282;
	border: thin;
	border-style: ridge;
	border-bottom: none;
	position: absolute;
	right: 0;
	left: 0;
	height: auto !important;
	height: 75px;
	bottom: 0%;
	z-index: 2;
}

#header {
	/*background-color: #AFAFAF;*/
}

#media{
	background-color: transparent;
	position: absolute;
	top: 25%;
	right: 20%;
	width: 30em;
	height: 30em;
	z-index: 3;
}

#sidebar_style1 {
	background-color: #663333;
	float: left;
	height: 800px;
	width: 10em;
	display: block;
}

a.nullLink:link {
	color: #FFFFFF !important;
	background: #FFFFFF !important;
    text-decoration: none;
	cursor: none !important;
}
a.nullLink:visited {
	color: #FFFFFF !important;
	background: #FFFFFF !important;
    text-decoration: none;
}
a.nullLink:hover {
	color: #FFFFFF !important;
	background: #FFFFFF !important;
    text-decoration: none;
}
a.nullLink:active {
	color: #FFFFFF !important;
	background: #FFFFFF !important;
    text-decoration: none;
}

/*Horizontal Navigation Meny CSS */
ul#navmenu { 
	margin: 0; 
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
	z-index: 1000;
}

ul#navmenu ul {
	width: 160px;
	/* Sub Menu Width */
	margin: 0;
	list-style: none; 
	display: none; 
	position: absolute; 
	top: 100%; 
	left: -2.5em; 
} 

ul#navmenu ul ul,
ul#navmenu ul ul ul { 
	top: 0; 
	left: 100%; 
} 

ul#navmenu li { 
	float: left; 
	display: inline; 
	position: relative; 
} 


ul#navmenu ul li { 
	width: 100%; 
	display: inline;
	position: relative;
} 

/* Root Menu */ 
ul#navmenu a { 
	/*border-top: 1px solid #FFF; 
	border-right: 1px solid #FFF;*/
	padding: 6px; 
	float: left; 
	display: block; 
	background: #FFFFFF; 
	color: #000000; 
	font: bold 11px Arial, sans-serif; 
	text-decoration: none; 
	height: 1%; 
}

/* Root Menu Hover Persistence */  
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a { 
	background: #000000; 
	color: #FFFFFF; 
}  
/*98DD98*/
/* 2nd Menu */  
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a { 
	float: none; 
	background: #BBB;
}  

/* 2nd Menu Hover Persistence */  
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a { 
	background: #000000;
}  

/* 3rd Menu */  
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a { 
	background: #999; 
}  

/* 3rd Menu Hover Persistence */  
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a { 
	background: #666; 
}  

/* 4th Menu */  
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a { 
	background: #666; 
}  

/* 4th Menu Hover */  
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
	background: #333; 
}  

/* Hover Function - Do Not Move */  
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul { 
	display: none; 
}  

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul { 
	display: block; 
}

/*End Horizontal Navigation Menu CSS*/

/*Vertical Navigation Menu CSS*/

ul#navmenu-v { 
	margin: 0; 
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 999;
}

ul#navmenu-v li{
	width: 160px; /* Menu Width */
	margin: 0;
	list-style: none; 
	float: left;
	position: relative;
}

ul#navmenu-v ul {
	display: none;
	position: absolute;
	width: 160px;
	top: 0;
	left: 7.5em;

}

/* Root Menu */
ul#navmenu-v a {
	/*border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;*/
	padding: 6px;
	display: block;
	background: #663333;
	color: #FFFFFF;
	font: bold 11px Arial, sans-serif;
	text-decoration: none;
	height: 1%;
	width: 148px;
}

/* Root Menu Hover Persistence */
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
	background: #000000;
	color: #FFFFFF;
}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a{
	float: left;
	background: #663333;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
	background: #000000;
}

/* 3rd Menu */
ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
	background: #663333;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
	background: #98DD98;
}

/* 4th Menu */
ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
	background: #663333;
}

/* 4th Menu Hover */
ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
	background: #333;
}

/* Hover Function*/
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
	display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
	display: block;
}

/*End Vertical Navigation Menu CSS*/

#profile_pic {
	float:right;
	position: absolute;
	right: 0;
	z-index: 5;
}


HTML:
<!--Sidebar-->
<div id="sidebar_style1">
<br />
<ul id="navmenu-v">
	<li><a class="deadLink" href="#">Digital Trends Videos</a>
		<ul>
			<li><a href="?p=projects&video=DT01">Dell XPS M1330 Laptop</a></li>
			<li><a href="?p=projects&video=DT02">SanDisk Sansa Fuze PMP</a></li>
			<li><a href="?p=projects&video=DT03">Flip Video Mino Camcorder</a></li>
			<li><a href="?p=projects&video=DT04">MAINGEAR Dash PC</a></li>
			<li><a href="?p=projects&video=DT05">T-Mobile Sidekick Slide</a></li>
			<li><a href="?p=projects&video=DT06">T-Mobile Sidekick LX</a></li>
			<li><a href="?p=projects&video=DT07">Garmin Nuvi 680 GPS</a></li>
			<li><a href="?p=projects&video=DT08">Lenovo IdeaPad U110 Laptop</a></li>
		</ul>
	</li>
	<li><a class="deadLink" href="#">Music Videos</a>
		<ul>
			<li><a href="?p=projects&video=MV01">Don't Let Go</a></li>
		</ul>
	</li>
	<li><a class="deadLink" href="#">Voice Overs</a>
		<ul>
			<li><a href="?p=projects&video=VO01">Nike Let Me Play</a></li>
		</ul>
	</li>
	<li><a class="deadLink" href="#">Other</a>
		<ul>
		<li><a href="?p=projects&video=other01">Lords of Corruption</a></li>
		</ul>
	</li>
</ul>
</div>

<div id="media">
<?php include('video_code.php'); ?>
</div>




video_code:
<?php
$video = $_GET['video'];
$width = "608";
$height = "342";
if($video == "DT01"){
	//Dell XPS M1330 Laptop
	echo "<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=BycTYyOpNzCdYG0yfJ4TLw4wuR5YtsSj&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$width height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=BycTYyOpNzCdYG0yfJ4TLw4wuR5YtsSj&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' wmode='transparent' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
}else if($video == "DT02"){
	//SanDisk Sansa Fuze PMP
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=YxcjYyOir1ieNgPUjqSjW-fz97RKfVej&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$width height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=YxcjYyOir1ieNgPUjqSjW-fz97RKfVej&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT03"){
	//Flip Video Mino Camcorder
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=9zcTYyOizqznIJB4mmEb066ZWRmvSx08&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$height height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=9zcTYyOizqznIJB4mmEb066ZWRmvSx08&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT04"){
	//MAINGEAR Dash PC
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=B4cTYyOkf82vGHfcudheXMm70z9K5e1W&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$width height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=B4cTYyOkf82vGHfcudheXMm70z9K5e1W&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT05"){
	//T-Mobile Sidekick Slide
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=8zcjYyOnvNGzOKxrphUvr1tF5RaKnNa4&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$width height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=8zcjYyOnvNGzOKxrphUvr1tF5RaKnNa4&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT06"){
	//T-Mobile Sidekick LX Cell Phone
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=4ycjYyOlSwweDmo_WnSm_8bX7cEmOfCV&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width=$width height=$height codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=4ycjYyOlSwweDmo_WnSm_8bX7cEmOfCV&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width=$width height=$height name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT07"){
	//Garmin Nuvi 680 GPS Navigation System
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width='$width' height='$height' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width='$width' height='$height' name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "DT08"){
	//Lenovo IdeaPad U110 Laptop Computer
	echo "
	<script src='http://www.ooyala.com/player.js?width=$width&height=$height&embedCode=53cTYyOpHVPbsTkiFRWtiXKTQF8t_ADy&autoplay=1'>
	</script>
	<noscript>
	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='ooyalaPlayer_4jgem_fk4ilkah' width='$width' height='$height' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
	<param name='movie' value='http://www.ooyala.com/player.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='flashvars' value='embedCode=53cTYyOpHVPbsTkiFRWtiXKTQF8t_ADy&autoplay=1' />
	<embed src='http://www.ooyala.com/player.swf' quality='high' bgcolor='#000000' width='$width' height='$height' name='ooyalaPlayer_4jgem_fk4ilkah' align='middle' play='true' loop='false' quality='high' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' flashvars='embedCode=90cTYyOouwtRGo1N3FVVI3gKGM8ZRLvR&autoplay=1' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>
	</noscript>";
} else if($video == "MV01"){
	//Amanda Shelby Music Video, Guitar player
	echo "
	<object width=$width height=$height>
	<param name='movie' value='http://www.youtube.com/v/2xp-MN7HbvY?fs=1&amp;hl=en_US'>
	</param>
	<param name='allowFullScreen' value='true'>
	</param>
	<param name='allowscriptaccess' value='always'>
	</param>
	<embed src='http://www.youtube.com/v/2xp-MN7HbvY?fs=1&amp;hl=en_US' flashvars='autoplay=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width=$width height=$height>
	</embed>
	</object>";
} else if($video == "VO01"){
	//Voice over, Nike "If you let me play sports"
	echo "
	<object width=$width height=$height>
	<param name='movie' value='http://www.youtube.com/v/s18OG2Hyz6E?fs=1&amp;hl=en_US'>
	</param>
	<param name='allowFullScreen' value='true'>
	</param>
	<param name='allowscriptaccess' value='always'>
	</param>
	<embed src='http://www.youtube.com/v/s18OG2Hyz6E?fs=1&amp;hl=en_US' type='application/x-shockwave-flash' flashvars='autoplay=1' allowscriptaccess='always' allowfullscreen='true' width=$width height=$height>
	</embed>
	</object>";
} else if($video == "other01"){
	echo "
	<script language='javascript' src='http://thenewsroom.com/mash/swf/voxant_player.js?a=V3664270&m=476093&w=$width&h=$height'></script>	
	<noscript>
	<div style='text-align: center;'><p>This video requires javascript to play.</p></div>
	</noscript>";
}else{
echo "
	<object width=$width height=$height>
	<param name='movie'/>
	<param name='quality' value='high' />
	<param name='bgcolor' value='#000000' />
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='true' />
	<param name='wmode' value='transparent' />
	<embed bgcolor='#000000' width=$width height=$height align='middle' allowscriptaccess='always' allowfullscreen='true' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer'>
	</embed>
	</object>";

}

?>



Apologies, the wrapping in the code tag makes it look a bit messier...


The site is also live, albeit still under construction, at http://Aaron-Groben.Thelenon.com

The page in question, http://Aaron-Groben.....com?p=projects

This post has been edited by Gorian: 24 November 2010 - 12:50 AM

Was This Post Helpful? 0
  • +
  • -

#4 Shado3225   User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 01:30 AM

Try changing the menu's z-index to 0
Was This Post Helpful? 0
  • +
  • -

#5 Gorian   User is offline

  • ninja DIC
  • member icon


Reputation: 154
  • View blog
  • Posts: 1,856
  • Joined: 28-June 08

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 01:58 AM

I will try it, but wouldn't that, if it works, put the menu under the flash video? I want the menus on top.

Set the menu's z-index to 0, but it didn't solve the problem....

This post has been edited by Gorian: 24 November 2010 - 02:01 AM

Was This Post Helpful? 0
  • +
  • -

#6 Shado3225   User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 02:06 AM

Not quite.

Give your menu a z-index of 0, and the embedded object a z-index of -1. Don't forget that when using z-index your parent div must be either position:absolute, position:relative, or position:fixed

See W3S z-index for referance
Was This Post Helpful? 0
  • +
  • -

#7 Gorian   User is offline

  • ninja DIC
  • member icon


Reputation: 154
  • View blog
  • Posts: 1,856
  • Joined: 28-June 08

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 02:36 AM

ok. Well, the video is embedded inside the div with an id of media, which is position:absolute, and a z-index lower than both menus (which are positioned relative). I also tried locally setting it to -1 and the menu to 0, which didn't help. :/


View PostShado3225, on 24 November 2010 - 12:06 AM, said:

See W3S z-index for referance


I am aware of how z-index works, and utilize it fine in my site, and I have googled the problem. Part of the problem seems to be that flash doesn't obey standard HTML or CSS, and is instead rendered as part of the operating system, which positions is in the webpage, according some sites that attempted to address the problems (the solutions posted didn't seem to help me)

This post has been edited by Gorian: 24 November 2010 - 02:51 AM

Was This Post Helpful? 0
  • +
  • -

#8 Gorian   User is offline

  • ninja DIC
  • member icon


Reputation: 154
  • View blog
  • Posts: 1,856
  • Joined: 28-June 08

Re: Flash video overlaps CSS Menus

Posted 24 November 2010 - 03:44 AM

Hmmm, I think the problem was that I was implementing the fix wrong... in the source here: <script src='http://www.ooyala.com/player.js?...&autoplay=1'> if you add &wmode=transparent then it performs as expected in Chrome and IE8

EDIT: Sorry for double post, I am tired, and meant to edit

This post has been edited by Gorian: 24 November 2010 - 03:54 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1