JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="wrapper"><div id="player"></div></div>


<button id="toggle-play">Toggle Play</button>
<button id="toggle-display">Toggle Display</button>
<button id="toggle-both">Toggle Both</button>

JavaScript

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: 300,
        width: 500,
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onReady': function(event) {
                event.target.playVideo();
            }
        }
    });
}

$('#toggle-play').click(function() {
    var state = player.getPlayerState();
    
    switch (state) {
        case 0:
            player.seekTo(0);
            player.playVideo();
            break;
        case 1:
            player.pauseVideo();
            break;
        case 2:
            player.playVideo();
            break;
        case -1:
            player.playVideo();
            break;
        default:
            break;
    }
});

$('#toggle-display').click(function() {
    $('#wrapper').toggle();
});

$('#toggle-both').click(function() {
    if ($('#wrapper').css('display') == "none") {
        $('#wrapper').show();
        player.playVideo();
    }
    else {
        $('#wrapper').hide();
        player.pauseVideo();
    }
});