How to make sure my href's take prescedence over any other layers including flash?

Question

Hello, I have built a media gallery for my site. The media gallery contains media items from sites such as YouTube and Vimeo.

In the system that I'm using, no thumnail is generated for media items that I link to. So what I've done is just display a small "view" of the media in my media gallery. This means I'm just showing a small version of the embedded video in the grouped list area. This effectively gives me a thumbnail view of the media item.

I am then wrapping that embedded video in a the hope is that the link will take them to the 'view' page for that media item on my site. If I wrap a YouTube embedded video in a - it works great, the link takes the visitor to my media item page. However, if I wrap a Vimeo video in an the link is ignored and when clicked the Vimdeo video starts playing in a really small thumnbail view.

Ahy way for me to supress the Vimeo embedded area from handling clicks? Is there CSS that will make put my link on top of the Vimeo video?

Any suggestions greatly appreciated!

Answer 1

"3d" positioning in web layouts is ... complex, to say the least. The part everyone knows about is the z-index style. But what a lot of people don't realize is, the z-index difference between two elements only comes in to play if they're at the same depth in the DOM tree; if they're not, the one that is higher in the tree (ie. closest to being directly under the BODY) will always be "on top", regardless of the z-index.

So, in theory, if you put your A tag higher in the DOM, it should take precedence over the video. Except, maybe not in IE. In IE, certain elements (I know for sure SELECTs do this, but video probably does too) always appear "above" ... well, everything else. The common workaround for this is to use another one of those elements (usually an IFRAME) as the background for your content. Alternatively there are libraries (such as the bgiframe plugin for jQuery) that will handle this sort of thing for you.

If none of that works, you also might just want to try hooking up an "onclick" event handler to the A (or maybe even the video itself), and then in that handler do "e.stopPropagation()" to prevent the click from "bubbling up". You could also do "e.preventDefault()" to prevent the default action of the movie starting, but you'd have to do that on the movie (or if you do it on the A, you'll need to make the handler do "window.location = link", since it will prevent the default action of the A, ie. going to the link).

Hope one of those ideas works for you.

Answer 2

try something like this. With z-index working as it does in order to get the a to cover the video something , the span, needs to not wrap the video. You might need to put in some height and width conditions on span too.

<div class="vid_container">
<a href="#">
<span></span>
< your video tag >
</a>
</div>

.vid_container a{position:relative;}
.vid_container a span{display:block; position:absolute;top:0;left:0;z-index:200;}
.vid_container a videotag {display:block; position:absolute;top:0;left:0;z-index:1;}