JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="434" height="244" src="https://www.youtube.com/embed/YcHTYXdS4Ck?autoplay=0&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>

<button class="start-video">Start Video</button>

CSS

.start-video {
    position: absolute;
    top: 106px;
    padding: 12px;
    left: 174px;
    background:transparent;
}
.start-video:hover {
    position: absolute;
    top: 106px;
    padding: 12px;
    left: 174px;
    background:transparent;
}

JavaScript

//youtube script
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;

onYouTubeIframeAPIReady = function () {
    player = new YT.Player('player', {
       
        playerVars: {
            'autoplay': 0,
            'rel': 0,
            'showinfo': 0
        },
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

onPlayerStateChange = function (event) {
    if (event.data == YT.PlayerState.ENDED) {
        $('.start-video').fadeIn('normal');
    }
}

$(document).on('click', '.start-video', function () {
    $(this).fadeOut('normal');
    player.playVideo();
});