Anylink JS Menu appears behind Parallax Slider

[dmwhipp]

1. Anylink JS Menu script: http://www.dynamicdrive.com/dynamici...pmenuindex.htm
2. Parallax Slider script: http://www.dynamicdrive.com/dynamici...ider/index.htm
3. Issue: Drop down menu appears behind embedded video without ?wmode and video stops appearing after first past with ?wmode in Internet Exploder.

molendijk was nice enough to help me get a YouTube video properly embedded into a slide. It's the 3rd slide in the sample here: http://www.cisfl.org/sample1.html

I then ran into the problem of the drop down menu appearing behind the video. After changing the z-index settings in the menu and slider CSS files with no change, I've been researching this and found it wasn't a z-index issue between the menu and slider, but by Flash always putting its content on top. I have been testing multiple ways to fix this, mostly by adding some variation of ?wmode to the video URL or into the video iframe. I've got it working in Chrome and Firefox but, of course, Internet Exploder has a problem.

After the first pass in IE in which the embedded video appears perfectly, the next time scrolling through the slideshow has a black screen with just the video play button. And, of course, the site owners use IE.

Has anyone else dealt with this issue or have any idea on how to fix it?
Thanks,
Deborah

[jscheuer1]

I think in most modern browsers you're already OK (at least on the demo page cisfl.org/sample1.html). Whatever you're doing there looks like it's working. Possibly with exceptions, IE is generally going to be the only one giving you real trouble on this. But with the advent of IE 11 - well it seems to be working in that too. I can also tell you that with video, using the ?wmode parameter in the url only does anything if you use it thus:

?wmode=transparent

Any other usage has no effect. This is unlike the wmode param tag (applicable to video object tags when included as a child of said tag) or the wmode property of an embed tag. In both of those cases there are slightly more options (transparent, opaque, and window - and in some cases - direct and gpu - see*) that have slightly different effects. I should also mention that the video itself plays a role insofaras how good it can work with/react to the various wmode modes. But again, with an iframe vid, the only wmode possible to explicitly specify is transparent and (as far as I know) that's only with YT and Vimeo vids. If that's not specified (?wmode=transparent in the url), the browser will decide. Modern browsers will choose transparent or one that will allow those sorts of benefits anyway. Most IE will choose window or an equivalent which forces other items underneath videos - hiding them. That's why it's best to specify transparent. You will almost always get your best cross browser results that way.

There will be cases where nothing can be done to get everything to work out right in all browsers. But usually it can be done.

Works fine here in IE 11. Which IE does the client have? If they have less than IE 11, why haven't they updated to 11? The only semi valid excuse is that they're still using Win XP which cannot support anything later than IE 8. But MS has long ago abandoned supporting Win XP, so they really need to update their OS. If not that (which can be expensive due to required hardware upgrades in many cases), then for security reasons they should at least update the browser to Chrome, Firefox, or Opera - all of which should work fine with this page as well.

Even with IE 11 or another modern browser, they may need the latest Flash plugin.

Looking at the code, I would change:

http://www.youtube.com/embed/7OmAiEvGp7A?&wmode=transparent

to:

http://www.youtube.com/embed/7OmAiEvGp7A?wmode=transparent

Though it might not help. And the browser cache may need to be cleared and/or the page refreshed to see changes in the problematic browsers.


*http://helpx.adobe.com/flash/kb/flas...wmode__values_

[molendijk]

I even wonder if YouTube still supports lower versions of IE.
For each YT-video

http://www.youtube.com/embed/VIDEO-ID

you can add various YT-parameters.
Real world example:

http://www.youtube.com/embed/7OmAiEvGp7A?autoplay=1&html5=1&start=30&end=100&rel=0&showinfo=0&controls=1&wmode=transparent&modestbranding=1&autohide=0&vq=large

If validation is a concern, replace each & with &

You may also be interested in this.

[jscheuer1]

They do support lower versions of IE. It's just that lower versions of IE - sometimes (or especially if) combined with older versions of Flash player just cannot handle YT videos all that well on more complex pages. The solution is to simplify the page for older IE (detect it and show it a dumbed down version of the page). However, folks with XP who are stuck with IE 8 should change to Chrome, Firefox, or Opera - that will not only fix this problem, but take also take care of a whole lot of other problems and dangers inherent to IE 8. All others should be able to update to IE 11, where there should be few if any problems compared to other browsers.

Also, even with the most recent IE - if you have an older version of Flash player, there could still be problems. Updating Flash player will fix those situations.

[dmwhipp]

Thanks John and Arie for the help and info. I keep outdated versions of Internet Explorer on my old computer for dealing with the few clients I have that also use IE and aren't comfortable downloading and/or updating their computers. It allows me to see their sites as they do and hopefully fix any issues before they view them.

Anyway, I'm using IE11 and I still have the issue with the video slide thumb only appearing on the first pass - after scrolling through the 3 slides, all instances of the video slide are then black, except for the title and controls. Here's a video showing the problem: http://www.dwwebdesigns.com/videos/C...SlideIssue.mp4. As you can see, the Play button works on the black slide, and once it begins playing, it continues to do so.

Deborah

[molendijk]

Very strange. I've looked at your test page again using IE11 and the video does not go black on my machine. But it does continue playing after a click on the play button. So yes, the script is having problems with IE (or the other way 'round). I'm stumped.
Do the same things happen if you replace the iframe with a text/html object?

[jscheuer1]

After watching the vid of the problem (nice touch! how did you make that?) I can now duplicate the issue here using my IE 11. There's probably some way around it, but - after playing with a number of things, I haven't found it yet.

I would also note that in all browsers (as far as I can tell), if you start the vid and then the slider continues on (either in auto or manual mode) the vid keeps playing even though you can't see it. This isn't good and may actually point to the solution. There is a YT iframe vid javascript api. It allows things like stopping and starting, seeking, rewinding, etc. And I also notice that if we play the vid in IE, however briefly, that overcomes its apparent visual disappearance. I'll look into this later tonight or over the next few days and get back to you on it. It's promising, but of course we must bare in mind that it might not provide a solution.

[molendijk]

The video doesn't stop playing when the slider continues because we stay on the page containing the video.
A workaround for the manual mode version of the slider is to attach an event handler to the body ensuring that a click event reloads the iframe.

HTML for the video:

<div class="slide" >
<div class="desc" > <!-- Takes care of the iframe's height  -->
<iframe name="ifrm" id="ifrm" style="position:relative; width:100%; height:100%" src="http://www.youtube.com/embed/7OmAiEvGp7A?wmode=transparent&amp;autoplay=0" frameborder="0" allowfullscreen ></iframe>
</div>
</div>

Event handler (script at the end of the body):

<script>
document.body.addEventListener("click", YouTubeStop);
function YouTubeStop() {//delay required in order not to interfer with slide
document.getElementById('ifrm').style.opacity=0;
setTimeout("frames.ifrm.location.replace('http://www.youtube.com/embed/7OmAiEvGp7A?wmode=transparent&amp;autoplay=0')",1000);
setTimeout("document.getElementById('ifrm').style.opacity=1",1500)
}
</script>

Demo: http://mesdomaines.nu/dmwhipp.html

It's not perfect, but it works (more or less)

[jscheuer1]

That's seems like it wouldnt get triggered if the slider advances in auto mode. I was thinking that it might be a good idea to replace the iframe tag each time the slider moves if it is hiding the video. Refreshing it might be better - I'm still in the testing phase here.

[molendijk]

That's seems like it wouldnt get triggered if the slider advances in auto mode.

You're right about that.
For both manual mode and auto mode, we could do http://mesdomaines.nu/dmwhipp2.html (with a stop button). But I'd rather do it without the button.
If only the iframe had an onclick. That would make it possible to hide the button if the video isn't playing.
The best solution would indeed be some action on the iframe each time the slider moves.