YouTube Video Overlay Button

Video overlaps the button after fullscreen exit. So the button is not clickable anympre. Only solution is to destroy and re-create the player on fullscreen exit.

by onury

HTML

<button id="btn">Click me</button>
<div id="ytp"></div>

CSS

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

JavaScript

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

window.onYouTubeIframeAPIReady = function () {
    var video = {
        player: null,
        create: function () {
            // first destroy if we already have the player
            if (video.player) { video.player.destroy(); }
            // create the player
            video.player = new YT.Player('ytp', {
                videoId: '9u_hp7zPir0',
                width: '620',
                height: '290',
                events: {
                    'onStateChange': video.onStateChange
                }
            });
        },
        onStateChange: function (event) {
            // YT.PlayerState.ENDED » exiting full screen
            if (event.data === 2) { video.create(); }
        }
    };
    video.create();
};


// Load YouTube iFrame API
(function () {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var first = document.getElementsByTagName('script')[0];
    first.parentNode.insertBefore(tag, first);
})();