Youtube: eingebettetes Video nur in schlechter Qualität auf ipad

Aus aktuellem Anlass ein kleiner Tipp bezüglich eingebetteter Videos von Youtube auf der eigenen Seite. Wie hinlänglich bekannt funktioniert der alte embed Code mit <object> auf iOS nicht, da es kein Flash unterstützt. Also her mit dem „neuen“ via <iframe> und der Drops ist gelutscht? Denkste!

youtube denkt mit und somit werden Videos nur in der Größe des iframes ausgeliefert. Soll heißen: Ist mein iframe zum Beispiel nur 400x300px dann bekommt man auch nur 240pbestenfalls 360p geliefert. Dies sieht gerade auf Retina im Vollbildmodus alles andere als gut aus.

Die gängige Lösung die URL des iframe um

&hd=1&vq=hd1080

zu ergänzen tut es leider nicht (allein).

Zunächst müssen wir das iframe per HTML-Attribuzt vergrößern um es dann per CSS wieder zu verkleinern. Aber auch da gibt es einen Stolperstein, denn ein einfaches

height: 300px;
width: 400px;

tut es leider nicht allein. Wir müssen speziell für iOS noch folgendes ergänzen:

-webkit-transform-origin: left top;
-webkit-transform: scale(0.5);

Dabei ist darauf zu achten, das sich das auf height und width aufschlägt. Soll heißen: Wenn wir für alle anderen Browser die Höhe und Breite setzen, müssen wir sie für iOS auch erst wieder zurücksetzen um sie dann mit scale(x) um den Faktor x wieder zu verkleinern. Ein Beispiel für Contao sieht folgender Maßen aus:

<iframe class="youtube" width="1200" height="900" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/xxxxxxxxxxxx?rel=0&hd=1&vq=hd1080"></iframe>

.youtube {
    height: 300px;
    width: 400px;

}

.ios .youtube {
    width: 1200px;
    height: 900px;
    -webkit-transform-origin: left top;
    -webkit-transform: scale(0.3333);
}

Wir laden das iframe in dreifacher Größe (900px Höhe), damit wir wenigstens 720p bekommen, &hd=1&vq=hd1080 sind gesetzt für ggf. andere Browser. Danach verkleinern wir das iframe auf die gewünschte Größe von 400x300px. Nun brauchen wir eine übergeordnete CSS-Klasse. Contao erledigt das für uns im body-tag mit der Klasse [.ios]. In anderen Systemen muss das ggf. selbst erledigt werden. Nun setzen wir die Größe wieder zurück und skalieren um den Faktor 1/3. Et voilà, wir haben gestochen scharfe Youtube Videos eingebunden, sofern diese auch seitens Youtube vorliegen.