YouTube Videos als HTML5-Video einbinden

Google hat gestern in seinem API-Blog von YouTube erklärt wie man seinen Besuchern mehr Kontrolle darüber geben kann, wie ein Video von YouTube in der Webseite eingebunden wird. Mit einem alternativen Code kann man es seinen Leserinnen und Lesern auch möglich machen, dass sie Videos im WebM-Fomat anschauen ohne auf YouTube selbst zu müssen.

Die Lösung hierfür ist ein simpler iframe. Der Code für das einbinden schaut so aus:
<iframe data-placeholder-image="https://www.googlewatchblog.de/wp-content/plugins/complianz-gdpr-premium/assets/images/placeholders/default-minimal.jpg" data-category="marketing" data-service="youtube" class="cmplz-placeholder-element cmplz-iframe cmplz-iframe-styles cmplz-video " data-cmplz-target="src" data-src-cmplz="http://www.youtube.com/embed/VIDEO_ID" src="about:blank" width="640" height="385" frameborder="0"><br /></iframe>
Wobei VIDEO_ID der entsprechenden YouTube-Video-ID entspricht (nach dem http://www.youtube.com/watch?v=HIER die VIDEO-ID)

Der Player schaut dann so aus wie der Player auf YouTube, nämlich so:

Die Vorteile gegenüber des anderen Codes:
– Das Video kann auch im video-Tag von HTML abgespielt werden
– WebM ist ebenfalls möglich (bei beiden wird auf die Einstellungen des Nutzers (youtube.com/html5) zurückgegriffen)
– neues Design
– weniger Code
– iFrame ist W3C-valide
– sollte das Video bspw. wegen Werbung nicht im HTML5-Player zur Verfügung stehen, wird auf Flash zurückgegriffen
– Ist ein Besucher nicht teil der Beta von HTML5, wird automatisch Flash geladen
– mobile Geräte können nun auch auf ihre HTML5-Fähigkeiten zugreifen

Nachteile:
– man kann noch keine andere Farben wählen
– Thumbnail ist gelegentlich verzerrt

Bei neueren Artikeln wird nun der iframe-Code verwendet, der Feed liefert Videos weiterhin im normalen Code aus, da iframes von Google nicht dargestellt werden.

» YouTube API Blog

---

---