Hello - I've got an issue that I have mostly figured out except for one final step. I managed to build a rotating banner that goes through 4 slides with a YouTube video embedded on one side and text on the other. The entire slide (a large table) rotates automatically every 2.5 seconds - and when the user watches the video the slide stops onClick on the div.
The problem I am having is getting the slides to start rotating again once the movie ends. Is there any way to do this? Basically I want the slides to stop rotating (not just the video - the entire slideshow) when the YouTube video is playing, and then when the video stops the slides start moving again after a few seconds. Is this even possible? What's the best way to do this? My code is below for two of the slides and the javascript code:
(The conditional ie statements are temporary for now until I find a better solution for IE6)
Code:
<!--[if IE 6]>
<table cellpadding="0" cellspacing="0" width="1000"><tr><td valign="top" width="500">
<![endif]-->
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo1" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie2" value="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td><td width="500" valign="top">
<![endif]-->
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo1Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed. Duis quis nunc. Sed enim. Elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, con sectetuer.</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td></tr></table>
<![endif]-->
</div>
</div>
<!-- videobox 1 -->
<!--[if IE 6]>
</div>
<![endif]-->
<!--[if IE 6]>
<div>
<![endif]-->
<!-- videobox2 -->
<div class="dyncontent" style="filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;">
<div class="videobox" style="width: 1000px; height: 294px;">
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo2" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie3" value="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo2Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>This is the 2nd video</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
</div>
</div>
<!-- videobox 2 -->
<!--[if IE 6]>
</div>
<![endif]-->
Here is the script:
Code:
<script type="text/javascript">
var badrotate = false;
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{position:absolute;left:0px;top:0px; width: 1000px; height: 294px;}\n')
document.write('</style>')
}
var speed=5000;
var curcontentindex=0
var messages=new Array()
function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=new zxcAnimate('opacity',alltags[i],0);
}
}
function rotatecontent(){
if(badrotate==true) return;
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].obj.style.zIndex="0" //hide previous message
messages[prevcontentindex].animate(100,0,speed/4);
messages[curcontentindex].obj.style.zIndex="1" //show current message
messages[curcontentindex].animate(0,100,speed/4);
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", speed);
}
}
</script>
Thank you for any help/advice!
Before you post, read our: 
