External YouTube Play/Pause Buttons (2 Videos)

by IngeniousSolutions

HTML

<p>VIDEO #1</p>
<div class="fullwidth">
<button id="play-button">PLAY</button>
<button id="pause-button">PAUSE</button>
<button id="stop-button">STOP</button>
</div>
<div class="fullwidth">
<iframe id="video" src="https://www.youtube.com/embed/aIXOyOLkb24?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<p>VIDEO #2</p>
<div class="fullwidth">
<button id="play-button2">PLAY</button>
<button id="pause-button2">PAUSE</button>
<button id="stop-button2">STOP</button>
</div>
<div class="fullwidth">
<iframe id="video2" src="https://www.youtube.com/embed/4zTCd-k--7A?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS

.fullwidth {width: 100%;}

JavaScript

// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
    // create the global player from the specific iframe (#video)
    player = new YT.Player('video', {
        events: {
            // call this function when player is ready to use
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady(event) {
    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
        player.playVideo();
    });
    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
        player.pauseVideo();
    });
    var stopButton = document.getElementById("stop-button");
    stopButton.addEventListener("click", function() {
        player.stopVideo();
    });
}

// Javascript for second video

// global variable for the player
var player2;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
    // create the global player from the specific iframe (#video)
    player2 = new YT.Player('video2', {
        events: {
            // call this function when player is ready to use
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady(event) {
    var playButton2 = document.getElementById("play-button2");
    playButton2.addEventListener("click", function() {
        player2.playVideo();
    });
    var pauseButton2 = document.getElementById("pause-button2");
    pauseButton2.addEventListener("click", function() {
        player2.pauseVideo();
    });
    var stopButton2 = document.getElementById("stop-button2");
    stopButton2.addEventListener("click", function() {
        player2.stopVideo();
    });
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag =...