Ich habe die Tage erst darüber geschrieben, wie man in WordPress Videos verschiedener Anbieter mittels Shortcode problemlos einbinden kann. Das hat den Vorteil, dass man jederzeit zentral Änderungen am Code vornehmen kann und sich diese Änderungen sich dann auf bereits alle vorhandenen Videos auswirken.

Lightbox und iFrame

Ein kleiner Nachteil, den ich bisher nicht bedachte habe, ist die Nutzung eines Lightbox-Plugins. Das ist diese Art von Plugin, welches verlinkte Bilder nicht auf einer neuen Seite, sondern mittels Javascript auf der gleichen Seite in einer Box mit Hintergrundschatten öffnet. Hat man ein Plugin installiert, welches genau das macht, könnte man unter Umständen das Problem haben, dass der neue iFrame-Code keine Anweisung für den wmode besitzt.

Der wmode gibt bei Flash-Elementen an, wie sie sich zum Beispiel im Zusammenspiel mit Javascript verhalten sollen. Hat man diesen nicht gesetzt, dann überlagert das Flash-Video unsere Lightbox und das schaut recht bescheiden aus.

Die Lösung für den iFrame-Code

Bei dem alten YouTube-Embed-Code war es logisch, da musste man den wmode einfach als Parameter des Object-Codes übergeben. Im neuen iFrame-Code ist das nicht viel anders, denn dort wird er einfach an die URL gehangen. YouTube macht das natürlich von Haus aus nicht, daher müsst ihr ihn manuell einfügen.

So schaut die Video-URL aus, welche YouTube in den iFrame-Code packt. Wobei alle Aufrufe hinter der Video-ID das Verhalten des Videos angeben. In diesem Beispiel steht zum Beispiel rel=0 für „keine ähnlichen Vidoes am Ende anzeigen“ und hd=1 für „in HD wiedergeben“. Das & ist einfach nur das Verbindungsstück für die Aufrufe.

http://www.youtube.com/embed/B4jiabMdegY?rel=0&hd=1

Wir müssen jetzt also einfach den Aufruf für den wmode an die URL anhängen.

http://www.youtube.com/embed/B4jiabMdegY?rel=0&hd=1&wmode=opaque

Der fertige iFrame-Code schaut dann also so aus.

<iframe title="YouTube video player" width="610" height="373" src="http://www.youtube.com/embed/B4jiabMdegY?rel=0&amp;hd=1&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

Kleine Ursache, große Wirkung, denn danach schaut ein Bild mit Lightbox über einem Video folgendermaßen aus.

Es versteht sich von selbst, dass es natürlich egal ist, ob ihr den iFrame-Code manuell nutzt, oder via Shortcode. Diese kleine Anpassung erfordert nicht viel Mühe, ist bei Nutzung einer Lightbox aber unabdingbar. Erfolgreich getestet in Google Chrome, IE9, Opera und Firefox 3.x.