Dieses Beispiel zeigt auf wie man mit der «Youtube Player API» ein YoutubeVideo in eine Webseite einbinden und steuern kann. Die API wird mit Javascript in die Webseite eingebunden und gesteuert.
Die Dokumentation der Youtube-API findest du hier: Youtube-API Dokumentation
Den kompletten Code für mein Beispiel findest du auf GitHub: YoutubeVideo-in-einem-animierten-DIV
Das Beispiel im Detail
Auf der Webseite ist ein div-Element mit blauem Rand zu sehen. Darin erscheint animiert ( von unten nach oben bewegend ) ein grau hinterlegtes weiteres div-Element, welches am unteren Ende ein iframe-Element mit einem Youtube-Video enthält.
Sobald man mit der Maus auf das grau hinterlegte div-Element oder auf das Youtube-Video fährt, stoppt die Animation bis die Maus die graue Fläche oder das Video wieder verlässt. Wenn das Youtube-Video gestartet wird, stoppt die Animation solange bis die Video-Wiedergabe entweder pausiert oder beendet wird.
index.html
- Bindet im head-Bereich das Stylesheet style.css und die Javascript-Datei youtubeAPI.js ein
- Das div-Element mit der class cq_container ist das Element mit dem blauen Rahmen. Es ist statisch und enthält das animierte div-Element.
- Das div-Element mit der class cq_scrollitem ist das animierte, grau hinterlegte div. Es scrollt von unten in Richtung oben in das statische div cq_container hinein. Auf diesem div-Element muss auf drei Events reagiert werden:
- onclick: die Animation starten oder stoppen
- onmouseover: die Animation stoppen
- onmouseout: die Animation starten oder stoppen
- Das innerste div-Element mit der id «player» dient als Platzhalter. Dieser Platzhalter wird aus dem Javascript-Code in youtubeApi.js mit einem iframe-Element und dem Youtube-Player ersetzt.
youtubeApi.js
youtubeApi.js enthält den Javascript-Code mit welchem die Youtube API gesteuert wird und den Code der die Animation des grau hinterlegten div-Elements steuert.
Die Funktionen aus youtubeApi.js werden in den folgenden Abschnitten genauer erklärt.
1) Laden der Youtube API
In youtubeApi.js wird zuerst die «Youtube Player API» asynchron geladen.
Sobald die API bereit steht, wird die function onYouTubeIframeAPIReady() ausgeführt.
Mit new YT.Player(‹player’…. wird der Youtube Player erzeugt und das div mit der id=»player» in index.html wird mit dem iframe-Element ersetzt.
2) function onPlayerReady() und function onPlayerStateChange()
Die function onPlayerReady() wird von der API aufgerufen sobald der Video-Player bereit ist um darin das Video darzustellen. Das Video könnte mit event.target.playVideo() automatisch gestartet werden sobald der Player geladen ist. Das wurde in diesem Beispiel aber auskommentiert.
Die function onPlayerStateChange() wird jedes Mal ausgeführt wenn sich der Status vom Youtube-Player ändert. Wenn das Video gestartet wird oder wenn es pausiert wird zum Beispiel.
Mögliche Stati vom Youtube-Player sind:
- 1 – nicht gestartet
- 0 – beendet
- 1 – wird wiedergegeben
- 2 – pausiert
- 3 – wird gepuffert
- 5 – Video positioniert
3) functions startAnimation(), stopAnimation(), toggleAnimation() und stopVideo()
Die function startAnimation() startet die Animation, so dass sich das grau hinterlegte div-Element innerhalb vom blau umrandeten div-Element von unten nach oben bewegt. Das Gegenteil bewirkt die function stopAnimation(), sie sorgt dafür dass die Animation gestoppt wird und das grau hinterlegte div-Element stehen bleibt.
Die function toggleAnimation() startet oder stoppt die Animation, je nachdem in welchen Zustand sich die Animation befindet.
Wenn das Youtube-Video gerade abgespielt wird, kann die Animation nicht gestartet werden ( if(playerState != 1) ) .
Die function stopVideo() beendet die Wiedergabe vom Youtube Video.
Die Funktionen toggleAnimation() und stopAnimation() werden aus index.html aufgerufen wenn die Events onclick, onmouseover oder onmouseout ausgelöst werden.
4) Das Event window.onload
Das Event window.onload wird ausgelöst sobald der gesamte Seiteninhalt wie Bilder, css und Scripts geladen wurde.
Die Seite wird mit document.querySelectorAll(‹.cq_scrollitem›) auf Elementen mit der Klasse cq_scrollitem durchsucht. Diese Elemente werden in das Array cq_scrollitem abgespeichert. Die Referenz auf das Element cq_scrollitem wird in den Funktionen startAnimation(), stopAnimation() und toggleAnimation() benötigt, damit die Animation gesteuert werden kann.
style.css
In style.css ist das Aussehen der verwendeten Html-Elemente definiert, sowie die Animation des grau hinterlegten div-Elements.
Die Animation ist so aufgebaut:
- @keyframes ScrollItem {}: Definiert die Animation. Der Name der Animation ist «Scrollitem»
- animation: ScrollItem 30s infinite;: Mit dieser Anweisung wird die Animation auf die Klasse cq_scrollitem zugewiesen. 30s bezeichnet den Zeitraum (30 Sekunden) in dem die Animation 1x komplett durchläuft. Infinite lässt die Animation endlos abspielen.
