JSFiddle - React, Tailwind, and code Playground

by chrimbus

HTML

<section id="head">
    <div id="container" class="click-to-play-video inactive-state">
        
        <div id="player" class="home-player"></div>
    </div>
    
</section>

CSS

#head {
    width:100%;
}
#container {
    cursor:pointer;
    width:670px;
    height:417px;
    margin:auto;
    position:relative;
}
.thumbnail {
    width:670px;
}
.inactive-state {
    background-repeat: no-repeat;
    background-image: url('http://i.imgur.com/LZiPOOa.png');
    background-position: center center;
}
.hover-state {
    background-image: url('http://i.imgur.com/jjb2AB6.png');
}

JavaScript

$("#container").mouseenter(function () {
    $(this).addClass('hover-state');
}).mouseleave(function () {
    $(this).removeClass('hover-state');
});

$("#container.click-to-play-video").click(function () {


    player = new YT.Player('player', {
        width: '670',
        height: '417',
        videoId: '_VDwDA0hz3c',
        playerVars: {
            'autoplay': 1
        },
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
});

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;

function onPlayerReady(event) {
    //event.target.playVideo();
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        player.destroy();
        $('#head').css({
            "background-color": "#aaa"
        });
    }
}