z-index not working with image zoomer

[unr3al39]

1) Script Title: Image zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: I am trying to implement the image zoomer for a single image but having a problem with stacking. Whenever there is a video below the large zoom image, the image shows under the video and not on top of it.

i tried to apply the z-Index to the jQuery script but it doesn't work. Am I putting it in the wrong place ?

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({ // single image zoom
zoomrange: [4, 4],
magnifiersize: [500,500],
magnifierpos: 'left',
cursorshade: true,
largeimage: 'largeimage.jpg',
zIndex: [999]
})

})

</script>

[jscheuer1]

Using z-index almost never is required in situations like that. The video needs wmode transparent. How that's done varies depending upon what kind of video it is. The video must be Flash based. But there are many different ways Flash video can be presented, each has its own way of setting the wmode to transparent. QuickTime and Media Player videos cannot be made to go behind HTML content. They will do it by themselves in some browsers, not in others. HTML 5 video can easily go behind other HTML content, but if that's what you have, there probably wouldn't be a problem in the first place.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[unr3al39]

Thank you for the response. The video is an embedded video from YouTube. It happens not necessarily on the site but even when I just create an html page of my desktop with the image zoomer and a YouTube video embedded in it. The video always appear on top of the enlarged image and not behind it. I just use the embed link I get from YouTube for example:

<iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]" frameborder="0" allowfullscreen></iframe>

Is there anything I need to change in the iframe to have it transparent ?

[molendijk]

Ad &wmode=transparent after the you tube URL.

[jscheuer1]

If your [videolink] is just the video with no ? in it:

<iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]?wmode=transparent" frameborder="0" allowfullscreen></iframe>

If it already has a ?:

<iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]&wmode=transparent" frameborder="0" allowfullscreen></iframe>

[unr3al39]

The "?wmode=transparent" seems to fix the problem. THANKS !

[unr3al39]

OK so this solution helped me with a single video where I added the "?wmode=transparent". However, my site has hundreds of embedded videos and playlists and I cannot spend days adding this command to each video.

Is there an overall solution to this problem within the script?

[unr3al39]

forget my last post. It works. THANKS

[jscheuer1]

Yeah well if you're using jQuery you could have it (or if not, even ordinary javascript) add that to every YT vid's URL on a page. But the question would be whether or not that would be in time for it to be parsed by the YT server.