@superherocheesecake/youtube-manager

YoutubeManager

Small helper that will load the Youtube script the moment you need it. Your application will initially load faster, because you don't have to wait for this third party API to finish loading.

NPM installation

npm i --save @superherocheesecake/youtube-manager

Load

import YoutubeManager from '@superherocheesecake/youtube-manager';

const youtubeManager = new YoutubeManager();
youtubeManager.addEventListenerOnce('ready', this._youtubeReadyHandler);
youtubeManager.load();

Youtube API Usage

_youtubeReadyHandler: function() {
    this.player = new YT.Player('[#ID]', {
        videoId: [YOUTUBE ID],
        playerVars: {autoplay: 1, showinfo: 0},
        width: [WIDTH],
        height: [HEIGHT],
    });
    this.player.addEventListener('onStateChange', this._onStateChangeHandler);
},

_onStateChangeHandler: function(e) {
    switch(e.data) {
        case YT.PlayerState.ENDED:
            console.log('ended');
            break;
        case YT.PlayerState.PLAYING:
            console.log('playing');
            break;
        case YT.PlayerState.PAUSED:
            console.log('paused');
            break;
        case YT.PlayerState.BUFFERING:
            console.log('buffering');
            break;
        case YT.PlayerState.CUED:
            console.log('cued');
            break;
    }
}