Comment s'assurer que mon href prenne la préséance sur toutes les autres couches, y compris le flash?

Question

J'ai construit une galerie média pour mon site. La galerie multimédia contient des éléments multimédias provenant de sites tels que YouTube et Vimeo.

Dans le système que j'utilise, aucune ligne de commande n'est générée pour les éléments multimédias auxquels je suis lié. Donc, ce que j'ai fait est juste afficher une petite "vue" des médias dans ma galerie de médias. Cela signifie que je montre juste une petite version de la vidéo intégrée dans la zone de liste groupée. Cela me donne effectivement une vue en miniature de l'élément multimédia. J'emballe alors cette vidéo incorporée dans un espoir que le lien les amènera à la page de «vue» pour cet article de médias sur mon emplacement. Si j'emballe une vidéo YouTube intégrée dans un - cela fonctionne très bien, le lien amène le visiteur à ma page d'article média. Cependant, si j'enveloppe une vidéo Vimeo dans un lien, celui-ci est ignoré et quand on clique dessus, la vidéo Vimdeo commence à jouer dans une très petite vue thumnbail.

Ahy moyen pour moi de supprimer la zone intégrée Vimeo de la manipulation des clics? Y at-il CSS qui va faire mettre mon lien sur le dessus de la vidéo Vimeo?

Toutes les suggestions grandement appréciées!

Answer 1

essayez quelque chose comme ceci. Avec z-index fonctionne comme il le fait pour obtenir le a pour couvrir la vidéo quelque chose, la durée, ne doit pas envelopper la vidéo. Vous devrez peut-être ajouter des conditions de hauteur et de largeur sur la plage.

<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;} 

Answer 2

Le positionnement "3D" dans les mises en page web est ... complexe, c'est le moins qu'on puisse dire. La partie que tout le monde connaît est le style z-index. Mais ce que beaucoup de gens ne réalisent pas, c'est que la différence d'indice z entre deux éléments ne joue que s'ils sont à la même profondeur dans l'arbre DOM; si ce n'est pas le cas, celui qui est le plus haut dans l'arbre (c'est-à-dire le plus proche d'être directement sous le CORPS) sera toujours "sur le dessus", quel que soit l'index z. Donc, en théorie, si vous mettez votre tag A plus haut dans le DOM, il devrait avoir la priorité sur la vidéo. Sauf, peut-être pas dans IE. Dans IE, certains éléments (je sais que les SELECT font cela, mais la vidéo le fait probablement aussi) apparaissent toujours "au-dessus" ... eh bien, tout le reste. La solution de contournement commune pour cela consiste à utiliser un autre de ces éléments (généralement un IFRAME) comme arrière-plan pour votre contenu. Sinon, il y a des bibliothèques (comme le plugin bgiframe pour jQuery) qui vont gérer ce genre de chose pour vous. Si rien de tout cela ne fonctionne, essayez aussi de connecter un gestionnaire d'événement "onclick" au A (ou peut-être même à la vidéo elle-même), puis dans ce gestionnaire faites "e.stopPropagation()". pour empêcher le clic de "bouillonner". Vous pouvez également faire "e.preventDefault()" pour empêcher l'action par défaut du film de démarrer, mais vous devrez le faire sur le film (ou si vous le faites sur le A, vous devrez créer le gestionnaire faites "window.location = link", car cela empêchera l'action par défaut de l'A, c'est-à-dire aller au lien).

Espérons que l'une de ces idées fonctionne pour vous.