Und gleich noch einen hinterher: Hat man die Videos endlich in guter Qualität zum Beispiel für das iPad eingebunden, kann es passieren, dass man gleich über das nächste Problem stolpert. Das Video überdeckt Inhalte (z. B. Vollbild-Layer) der eigenen Webseite. Fällt normalerweise weder im Firefox noch Chrome auf, lediglich der Internet Explorer hat bei mir Probleme. Speziell ist das Problem mit Windows 7, Internet Explorer 9 und installiertem Flash aufgetreten. Ohne Flash (nicht installiert oder einfach deaktiviert) passiert der Fehler nicht.
Standardmäßig lädt youtube einen Flash-Fallback, wenn es erkennt, das der anfragende Browser kein video tag unterstützt. Leider meint der Internet Explorer 9, er melde das er nur Flash kann. Somit reagiert Youtube und lädt das Video entsprechend. Leider wird dabei der wmode=window gesetzt und zunächst erscheint es als hätte man keinen Möglichkeit der Einflussnahme. Jedoch kann man der URL im iframe wie hier schon gelernt Parameter anhängen: wmode=opaque ist unser Freund. Somit drängt das Video nicht mehr ungebremst in den Vordergrund. Das Ganze sieht dann so aus:
<iframe class="youtube" width="1200" height="900" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/xxxxxxxxxxxx?rel=0&wmode=opaque"></iframe>