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!

Was ist Alexa? Hier ist die Antwort!

Alexa, ein Tochterunternehmen von Amazon, bietet Onlineservices, welche unter anderem die Reichweiten von Webseiten messen. Dies geschieht mit Hilfe des ermittelten Besucherverkehrs, gemeinhin als “Traffic” bekannt. Wenn von “Alexa” gesprochen wird, ist jedoch meist das von Alexa ermittelte Rankingergebniss gemeint.

Im “Alexa”-Ranking besagt eine niedriger Nummer hohen Traffic, hohen Besucherverkehr. Im weltweiten Ranking ist aktuell facebook.com an erster Stelle dieses Rankings – gefolgt von google.com, youtube.com und yahoo.com. Google.de auf Rang 19. Die nächsten .de-Domains finden sich auf Rang 70 mit eBay.de, Rang 79 von amazon.de und Rang 138, belegt von spiegel.de. Wer gelegentlich schaut, erkennt den Trend: .de-Domains rutschen langsam aber stätig nach hinten.

warriorforum.com, das weltgrößte Forum zum Thema Internetmarketing ist mittlerweile auf Platz 136. Interessant zu sehen ist es, das rund 10,9 Prozent des Traffic von warriorforum.com aus Indien kommen. Aus Deutschland hingeben nur 2 Prozent. Alexa zeigt also nicht nur die Menge des Traffic und dessen Ursprung, sondern auch demographische Daten. Natürlich fehlen auch Angaben zu verweisenden Links nicht. Alexa bietet insgesamt eine große Auswahl an Statistiken und wer sie zu nutzen weiß, ist klar im Vorteil.

Das Unternehmen Alexa bietet auf seiner Website neben dem Top-500-Ranking, welches auch nach Ländern oder Kategorien gewählt werden kann, eine Vielzahl nützlicher Onlinetools, welche nach einer kostenlosen Anmeldung genutzt werden können. Angenehm fällt auf, das die von Alexa erhobenen Daten zu Webseiten und Schlagwörtern teils auch kostenfrei und ohne Anmeldung sehr detailiert abgefragt werden können. Natürlich kann man auch einen Schritt weiter gehen und das kostenpflichtige “Alexa Site Audit” zur Analyse und Optimierung der eigenen Website in Anspruch nehmen.