Wie kann ich sicherstellen, dass meine Referenzreferenzen Vorrang vor allen anderen Ebenen haben, einschließlich Flash?

Question

Ich habe eine Mediengalerie für meine Website erstellt. Die Mediengalerie enthält Medienelemente von Websites wie YouTube und Vimeo.

In dem System, das ich verwende, wird kein Thumnail für Medienelemente generiert, mit denen ich verlinke. Also habe ich nur eine kleine "Ansicht" der Medien in meiner Mediengalerie gezeigt. Dies bedeutet, dass ich nur eine kleine Version des eingebetteten Videos im gruppierten Listenbereich zeige. Dies gibt mir effektiv eine Miniaturansicht des Medienelements.

Ich wickle dann das eingebettete Video in eine Hoffnung ist, dass der Link sie auf die 'Ansicht' Seite für dieses Medium Element auf meiner Website bringen wird. Wenn ich ein eingebettetes YouTube-Video in ein Video einpacke - es funktioniert prima, bringt der Link den Besucher auf meine Medieneinzelteilseite. Wenn ich jedoch ein Vimeo-Video in einen Wrap einlege, wird der Link ignoriert und beim Anklicken wird das Vimdeo-Video in einer wirklich kleinen Thumnbail-Ansicht abgespielt.

Ahy Weise für mich, den Vimeo eingebetteten Bereich von der Handhabung von Klicks zu unterdrücken? Gibt es CSS, das meinen Link auf das Vimeo-Video setzen wird?

Alle Vorschläge sehr geschätzt!

Answer 1

versuchen Sie etwas wie das. Mit Z-Index arbeiten, wie es tut, um das a zu bekommen, um das Video etwas abzudecken, muss die Spannweite, das Video nicht umhüllen. Sie müssen möglicherweise auch einige Höhen- und Breitenbedingungen auf der Spannweite eingeben.

<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

"3D" Positionierung in Web-Layouts ist ... komplex, um es gelinde auszudrücken. Der Teil, den jeder kennt, ist der Z-Index-Stil. Aber was viele Leute nicht wissen, ist, dass der Unterschied zwischen zwei Elementen nur dann zum Einsatz kommt, wenn sie sich im DOM-Baum in derselben Tiefe befinden. Wenn nicht, ist derjenige, der höher im Baum ist (dh der nächste, der direkt unter dem BODY liegt) immer "oben", unabhängig vom Z-Index.

Also, in der Theorie, wenn Sie Ihr A-Tag höher in das DOM legen, sollte es Vorrang vor dem Video haben. Außer, vielleicht nicht in IE. In IE, bestimmte Elemente (ich weiß sicher, SELECTs tun dies, aber Video wahrscheinlich auch) immer "über" erscheinen ... nun, alles andere. Die übliche Problemumgehung dafür besteht darin, ein anderes dieser Elemente (normalerweise ein IFRAME) als Hintergrund für Ihren Inhalt zu verwenden. Alternativ gibt es Bibliotheken (wie das bgiframe-Plugin für jQuery), die diese Art von Dingen für Sie erledigen.

Wenn nichts davon funktioniert, möchten Sie vielleicht auch nur versuchen, einen "onclick" -Ereignishandler mit dem A (oder vielleicht sogar dem Video selbst) zu verbinden, und dann in diesem Handler "e.stopPropagation()" um zu verhindern, dass der Klick "aufblubbert". Sie könnten auch "e.preventDefault()" verwenden, um die Standardaktion des Films beim Start zu verhindern, aber Sie müssten dies für den Film tun (oder wenn Sie es auf dem A tun, müssen Sie den Handler erstellen do "window.location = link", da es die Standardaktion des A verhindert, dh auf den Link zu gehen.

Ich hoffe, eine dieser Ideen funktioniert für Sie.