JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div id="yt-player"></div>
<button id="btn">Click me</button>

CSS

button{position:absolute;top:100px;left:50px;z-index:2147483647;height:50px;width:200px;}

JavaScript

var iframeEl;

document.getElementById('btn').onclick = function() {
    alert('clicked');
}

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

var player;
window.onYouTubeIframeAPIReady = createPlayer;

function createPlayer() {
    console.log('YT API Ready', arguments);
    player = new YT.Player('yt-player', {
        height: '290',
        width: '620',
        videoId: '9u_hp7zPir0',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    console.log('YT Player Ready');
    iframeEl = document.getElementById('yt-player');
    //event.target.playVideo();
}

function onPlayerStateChange(event) {
    console.log('YT State Changed', event);
    if (event.data == YT.PlayerState.PLAYING) {
        console.log( document.activeElement );
        
        var timer = setInterval(function() {
            try {
                console.log( document.activeElement );
                if( document.activeElement === document.body ) {
                    clearInterval( timer );
                    redraw();
                }
            } catch(ex) { 
                // silence any iframe access errors
            }
        }, 500);
        /**/
    }
}

function redraw() {
    console.log('Redraw');
    //iframeEl.parentNode.replaceChild( iframeEl.cloneNode(), iframeEl );
    player.destroy();
    createPlayer();
}