Neuigkeiten: Zurück zur ÜbersichtLightbox - Youtube Video - z-index overlay Vordergrund Hintergrund
Vielleicht haben Sie sich schon mal gefragt, warum der neue Youtube Embedcode mittels iframe vor den Lightbox Darstellungen auf der gleichen Seite zu liegen kommt ...
Nun gibt es ja den neuen Youtube Embed Code - welcher auf iframe basiert - schon seit einiger Zeit. Manchmal kommt es bei mir vor, dass ich sowohl Lightbox-Galerien als auch eingebettete Youtube-Videos auf der gleichen Seite darstellen will.
Da gab es mit dem neuen Embed-Code von Youtube in Problem: das Video war immer im Vordergrund - also auch vor der Lightbox. Das wollte ich natürlich nicht.
Die Lösung liegt in einem Zusatzparameter für das Video, welcher im Embed-code einzufügen ist. Dadurch wird der z-index (also die Reihenfolge der Layers in der Darstellung) für das Video zurück genommen, sodass die Lightbox an vorderster Stelle zur Anzeige kommt.
Standard-Embed code
<iframe height="349"
frameborder="0" width="560"
src="http://www.youtube.com/embed/qmtdV-63yeM"
allowfullscreen=""></iframe>
|
Ergänzter Embed code
<iframe height="349"
frameborder="0" width="560"
allowfullscreen=""
src="http://www.youtube.com/embed/qmtdV-63yeM?wmode=transparent"></iframe>
|
Weitere mögliche und vielleicht sinnvolle Parameter wären zum Beispiel:
showinfo=0
keine Information (Videotitel) im eingebetteten Video (vor dessen Start) anzeigen.
rel=0
keine links zu weiteren oder ähnlichen Videos am Ende des Abspielens anzeigen.
Der Embedcode könnte dann insgesamt zum Beispiel so aussehen:
<iframe height="349"
frameborder="0" width="560"
allowfullscreen=""
src="http://www.youtube.com/embed/qmtdV-63yeM?wmode=transparent&rel=0&showinfo=0"></iframe>
|
Hier wäre noch anzumerken, dass die weiteren Variablen nicht mit einem "&" anzufügen sind, sondern der "&" als "&" einzutragen ist.
Durch die Verwendung der Variablen wmode=transparent wird die Lightbox vor dem eingebetteten Video dargestellt - und die Welt ist wieder in Ordnung.
Ein Beispiel für die Anwendung dieser Youtube Embed-Methode mit dem Youtube iframe Code finden Sie zum Beispiel auf dieser Seite. Starten Sie die Lightbox durch Klick auf eines der Bilder in der rechten Spalte ...
Zu erwähnen ist auch, dass in der Lightbox auf der Beispielseite die Lightbox die Bildgröße automatisch auf die Browsergröße skaliert - und der Hintergrund immer dunkelgrau bleibt. Das ist ja nicht bei allen Lightboxes so. Information zu meiner Lightbox Implementierung.
|
