Utilizarea YouTube Player API pentru integrarea playerelor Youtube in etichete iframe

Playerul Youtube poate fi construit si controlat prin intermediul unui API pus la dispozitia dezvoltatorilor web.

Standardele se impun si lucrul devine mai usor.

Obiectul player

In primul rand, intergam in pagina api-ul pentru iframe-ul playerului:

<script src='https://www.youtube.com/iframe_api?ver=5.3.2'></script>

Apoi inseram in pagina containerul care va fi inlocuit cu iframe-ul playerului Youtube. Remarcam id-ul etichetei care va servi la crearea obiectului JavaScript “player”.

<div id="video-play"></div>

Cream obiectul JS player:

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('video-play', {
                    width: 560,
                    height: 315,
                    videoId: '8YuA_GPuCPQ',
                    events: {
                        'onReady': initialize,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }


            function initialize() {}

            function onPlayerStateChange(event) {}

Functia initialize are rolul de a efectua anumite setari controlate asupra playerului.

Functia onPlayerStateChange face anumite actiuni in diferite stari ale playerului:

• -1 (unstarted)
• 0 (ended)
• 1 (playing)
• 2 (paused)
• 3 (buffering)
• 5 (video cued).

Exemplu:

function onPlayerStateChange(event) {
                switch (event.data) {
                    case 0:
                        //final

                      document.getElementById("buton-play-img").style.display="block";
                      document.getElementById("video-play").style.visibility="hidden";
                        console.log('block');
                        break;
                    case 1:
                        //play
                        document.getElementById("buton-play-img").style.display="none";
                        document.getElementById("video-play").style.visibility="visible";
                        console.log('none');
                        break;
                    case 2:
                        //pauza
                        document.getElementById("buton-play-img").style.display="block";
                        document.getElementById("video-play").style.visibility="hidden";
                        console.log('block');
                        break;
                }
            }

Daca ai nevoie de contro, asupra playerului video Youtube intergart in pagina web, API-ul acesta este de mare ajutor. Documentatia se afla aici:

https://developers.google.com/youtube/iframe_api_reference