Beiträge

Youtube & z-index: die finale Lösung

Manch einer kennt es: man bindet einen Videoplayer von YouTube auf einer Website ein und dieser legt sich scheinbar willkürlich über andere Elemente, obwohl diese Elemente per z-index (und/oder per position:absolute oder position:relative) korrekt angeordnet sind. Dieses oder ähnliche Probleme treten häufig bei inkludierten Inhalten auf. Hier die Lösung für den YouTube-Player.

Das “Problem”

Der YouTube-Player kommt meist in einem iframe daher und ist zudem oftmals noch ein Flashelement. Diese lassen sich manchmal nur schwer in Ihrer Ebene bestimmen. Bevor ich hier nun aber zu weit ins Detail gehe, ganz einfach mal die Lösung, wie man seinen YouTube-Player korrekt positioniert bekommt.

Kurz zeige ich noch den Code, welcher seitens YouTube erzeugt wird, sofern man einen Player auf einer Website einbindet. Er kann von Eurem Code eventuell leicht abweichen, was jedoch nicht tragisch ist. Wichtig ist die URl im Player – beachtet mal diese und vergleicht sie in beiden folgenden Beispielen – dann erkennt Ihr den Unterschied und sogleich die Lösung des “Problems”.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Die Lösung:

Nun der Code, wie er aussehen muss, damit sich das “Problem” erledigt. Der Code unterscheidet sich in nur einer einzigen Gegenbenheit, der URl. Hier wird das Attribut wmode=transparent angefügt. Sonnst ist alles gleich.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed&wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

Manuell oder automatisch?

Nun kann man also wmode=transparent manuell in jeden Player integrieren. Wer wie ich, den Player automatisch einbindet (jahahaha, ich liebe automatisch), der kann auch die Ergänzung um das wmode=transparent automatisiert vornehmen lassen. Dazu dient der folgende JavaScript. Am besten wird er im head-Bereich der Website eingefügt. Ich zeige zwei Codes, welche nach dem Prinzip entweder/oder verwendet werden müssen.

Entweder/oder? Geht mal in den Quelltext der Website und schaut, wie die URl im Player aussieht. Wird dort bereits ein Parameter angehängt, muss der folgende Code verwendet werden. Wird in der URl noch kein Parameter übergeben, muss der zweite Codeschnipsel verwendet werden.

Codeschnipsel 1:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});

Codeschnipsel 2:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"&wmode=transparent");
});
});

Voila!

Nun klebt der YouTube-Player auf jener Ebene, wo er auch sein soll. Man kann nun genüsslich weiterarbeiten. Hat alles geklappt oder brauchst Du Hilfestellung? Du findest den Tipp gut? Ich freue mich auf Dein Kommentar!