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!

WordPress: ohne Plugin Cookies erstellen und abfragen

Jaja, man muss sich notieren, was man sich merken mag… Heute: wie speichert man Cookies mit WordPress ohne Plugin und wie regelt man die Abfrage des Cookies?

An sich ganz einfach. Um das Prinzip einfach zu erklären, gehen wir davon aus, wir möchten einen Besucher begrüßen. Ist es der erste Besuch, zeigen wir ein “Hallo Fremder!”. Sobald der Besucher ein zweites mal auf die Website kommt, möchten wir ihm eine Meldung wie “Schön, Dich wieder zu sehen!”

Der Mechanismus dahinter ist ebenso einfach. Wir prüfen, ob ein (unserer) Cookie schon vorhanden ist. Wenn nicht, machen wie Aktion X, wenn ja, machen wir Aktion Y. Um dies zu realisieren, lassen wir beim ersten Besuch einen Cookie erstellen und prüfen zugleich, ob er schon vorhanden ist. Da der Cookie zwar beim ersten Besuch erstellt wird, aber beim Aufruf der Website noch nicht vorhanden ist, greift der Mechanismus

Cookies mit WordPress erstellen

Um das setzen des Cookies in WordPress zu realisieren, trage folgenden Code in die functions.php deines WordPress-Themes ein:

function set_newuser_cookie() {
if (!isset($_COOKIE['sitename_newvisitor'])) {
setcookie('sitename_newvisitor', 1, time()+1209600, COOKIEPATH, COOKIE_DOMAIN, false);
}
}
add_action( 'init', 'set_newuser_cookie');

Dies setzt einen Cookie namens “sitename_newvisitor”, welcher 2 Wochen lang gültig ist. Wenn Du mehr über die Funktionsweise und den Aufbau von Cookies erfahren magst, empfehle ich setcookie function at PHP.net.

Cookies mit WordPress und PHP überprüfen

Um nun zu prüfen, ob der Besucher erstmalig die Website besucht oder dies ein erneuter Besuch ist, könntest Du nun folgenden PHP-Code verwenden:

if (isset($_COOKIE['sitename_newvisitor'])) {
echo 'Schön, Dich wieder zu sehen!';
}
else {
echo 'Hallo Fremder!';
}

Nun bist Du an der Reihe!

Hat Dir das kleine Tutorial geholfen? Hat alles bei Dir funktioniert oder ist Dir das setzen eines Cookies mit WordPress immernoch ein Rätsel? Ich freue mich über Dein Feedback!