PDA

View Full Version : Anylink JS Menu appears behind Parallax Slider



dmwhipp
11-18-2014, 01:56 AM
1. Anylink JS Menu script: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
2. Parallax Slider script: http://www.dynamicdrive.com/dynamicindex17/parallaxslider/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
11-18-2014, 05:43 AM
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/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_

molendijk
11-18-2014, 11:30 AM
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 (http://mesdomaines.nu/cleanyoutube).

jscheuer1
11-18-2014, 04:32 PM
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
11-18-2014, 07:54 PM
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/CISFlorida_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
11-18-2014, 09:22 PM
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
11-19-2014, 02:18 AM
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
11-19-2014, 02:29 PM
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
11-19-2014, 04:00 PM
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
11-19-2014, 04:52 PM
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.

jscheuer1
11-19-2014, 05:08 PM
OK, I have a workable solution to both problems. It has one drawback. If the vid is stopped by the user, really, however it's stopped, whether by the user or this modification, it will always be at the beginning the next time it appears. The only way the user can watch it, pause it, resume it is if the slider doesn't move in between pause and resume of the vid. It's theoretically possible to get the vid's current index, and add that to the url so that it will start at that point the next time. But the script overhead really isn't worth it in my opinion and it might cause more problems than it's worth. But I'll play around with it a little to see if perhaps it's more workable than I'm currently thinking.

For the current solution, first download and use this updated version of the slider script which allows for an optional onslide callback function:

5554

Next, for the onpage init for the slider, add the highlighted and make sure to also add the red comma to the previous line, all as shown:


<script type="text/javascript">
var firstparallaxslider=new parallaxSlider({
wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
displaymode: {type:'auto', pause:5000, cycles:0, stoponclick:true, pauseonmouseover:true},
delaybtwdesc: 500, // delay in milliseconds between the revealing of each description layer inside a slide
navbuttons: ['/scripts/paraslider/arrowleft.png', '/scripts/paraslider/arrowright.png', 'up.png', 'down.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 1000, //transition duration (milliseconds)
onslide: function(slider, setting, nextslide){
if(slider.curslide == 2){
setTimeout(function(){
document.getElementById('thevidiframe').src = document.getElementById('thevidiframe').src;
}, setting.slideduration);
}
}
})
</script>

Since it's the third slide, it's zero based index is 2 if(slider.curslide == 2). If that changes, that number will need to be changed to reflect its new position.

Finally, we need to assign a unique id to the iframe with the video. In the above code, I use 'thevidiframe', so that's what we will use here (add the highlighted):


<div class="slide">
<div class="bgoverlay"></div>
<div class="desc">
<iframe id="thevidiframe" style="position:relative; width:100%; height:100%" src="http://www.youtube.com/embed/7OmAiEvGp7A?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>
</div>

After taking care of all that, the page should be refreshed - the browser's cache may also need to be cleared.

Any problems or questions, just let me know.

molendijk
11-19-2014, 06:52 PM
Yes, that seems to work well!
I made a demo for it: http://mesdomaines.nu/dmwhipp3.html

dmwhipp
11-20-2014, 02:59 AM
Hi Arie,
I'm not sure how to correctly code it with the text/html object. I tried replacing <iframe with <object type="text/html", but that lost the video entirely:
http://www.cisfl.org/sample4.html

dmwhipp
11-20-2014, 03:10 AM
Thanks John for the video comment. I used the free version of Bandicam: http://www.bandicam.com/. One thing I really love about it is that it gives the option to record voice or to turn audio off. It has been great for making video tutorials for some of my clients - I type up step by step instructions for them and go back and forth between the instructions doc (using a visible and cursor and sometimes highlighting the mouse) and then the screen with a live example of the instructions. ([URL="https://www.youtube.com/channel/UCdED37yaDQ9dt2UEbil22hg"] I found since I talk very quickly, this is much better for me, since I don't have to keep re-starting the recording if I speak too quickly or misspeak altogether. I think the licensed version is only $39 and I'll probably end up getting that after Christmas.

And now, seeing that there are several more posts to this thread and you and Arie are being so kind as to delve into this issue, I will quit responding and bugging you both until I read all the posts :)

Thanks!
Deborah

dmwhipp
11-20-2014, 03:16 AM
John and Arie - thank you for all your help with this! I'm knocking off work for the night, but will start on this first thing tomorrow.
Thanks again!
Deborah