YouTube-Video w3c valide als iframe in html5-WebSite einbinden
YouTube empfiehlt seine Videos per iframe einzubinden. Dadurch wird sichergestellt, dass in den verschiedenen Browserfamilien (z.B. Mozilla, IE, Safari, mobile Browser) das Video jeweils korrekt dargestellt wird. Leider ist der Code für die Einbindung nicht w3c valide. Insbesondere die frameBorder-Property stellt eine gewisse Hürde dar.
Standardmäßig sieht der einzubindende Code wie folgt aus:
Probleme bezüglich w3c-Validität bereiten:
- frameborder="0"
- allowfullscreen=""
- wmode="transparent"
W3C valide Alternative für frameborder=0
In den meisten modernen Browsern kann Frameborder problemlos mit einem entsprechenden Stylesheet ersetzt werden. Das sieht wie folgt aus:
border:0px;
};
Danach bleiben eigentlich nur noch ältere Versionen des Internet-Explorers übrig (<IE9), die darauf nicht reagieren. Jetzt lässt sich natürlich trefflich darüber diskutieren, in wie weit man diese alten Browser noch unterstützen muss und ob hierbei Aufwand und Nutzen noch in einer vernünftigen Relation stehen. Ich habe mehr aus „sportlichem Ehrgeiz“ nach einer Lösung gesucht und auch gefunden. Das folgende kleine Javascript ist die Lösung:
<!--[if lt IE 9]>
<script type="text/javascript">
var iframe = document.getElementById("myframe");
var iframeClone = iframe.cloneNode(true);
iframeClone.setAttribute("frameBorder", 0);
iframe.parentNode.replaceChild(iframeClone, iframe);
</script>
<![endif]-->
Erläuterung
- Damit das Script nur bei älteren IE-Browsern zur Anwendung kommt, wurde es in einen conditional Comment platziert.
- Sobald der iframe auf der Website geladen wurde, ist eine Veränderung des FrameBorders nicht mehr möglich.
Somit gibt es zwei Ansätze:- Den iframe gleich dynamisch per Javascript zu schreiben. Der Nachteil besteht darin, falls der Benutzer Javascript deaktiviert hat, wird der iframe gar nicht geladen.
- Den iframe, so wie oben beschrieben, ganz normal laden und danach zu modifizieren. Hierzu muss der vorhandene iframe dupliziert werden (clone), das FrameBorder-Attribut gesetzt und danach das iframe-Tag durch den modifizierten Clone ersetzt werden (replace).
Diese wenigen Zeilen können natürlich auch in eine vorhandene Javascript-Datei integriert werden, um einen zusätzlichen Request zu vermeiden. Dabei sollten Sie die Ausführung aber auch auf <IE9 beschränken. Das kann durch die Abfrage der Methode „window.attachEvent“ erfolgen, welches nur von <IE9 interpretiert wird.
if (window.attachEvent) {
var iframe = document.getElementById("myframe");
var iframeClone = iframe.cloneNode(true);
iframeClone.setAttribute("frameBorder", 0);
iframe.parentNode.replaceChild(iframeClone, iframe);
}
</script>
Weitere Anpassung, um den Aufruf w3c valide zu gestalten
Auf das Attribut allowfullscreen kann verzichtet werden. Auch ohne dieses Attribut besteht die Möglichkeit auf die Volltextansicht umzuschalten.
Das Attribut wmode ="transparent" ist z.B. nur notwendig, falls man einen feststehenden Header und / oder Probleme mit dem z-index hat. Dieses Attribut kann aber auch einfach als URL-Parameter angefügt werden.
Das w3c valide iframe-Tag für YouTube-Videos sieht dann wie folgt aus:
src="VIDEO_URL?feature=player_embedded&wmode=transparent"></iframe>
Fazit
Wie Sie sehen, ist es mit vertretbaren Aufwand möglich, auch YouTube-Videos w3c valide einzubinden. Trotzdem finde ich es ein wenig unverständlich, dass YouTube nicht selbst validen Code anbietet, sondern die Entwickler basteln lässt.