JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="midContent">
    <div style="float: right;width: 576px;height: 328px;position: relative;">
        <div id="videoConatiner" style="position: absolute;">
            <iframe id="video" width="574" height="328" src="//www.youtube.com/embed/Oc_C8uzRrXQ?enablejsapi=1&html5=1" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <div id="videoOverlay">
            <div id="playButton" width="76" height="74" style="background-image:url(http://hulea.org/tippecanone/Golf-Course/images/play.png);position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 0 auto;padding: 0;margin-top: 125px;width: 94px;height: 62px;background-repeat: no-repeat;background-size: 95px;z-index: 9999;"></div>
            <img src="http://hulea.org/tippecanone/Golf-Course/images/sample-hole-vid-size-capture.png" alt="" title="" width="576" height="328" style="position: absolute;" />
        </div>
    </div>
</div>

JavaScript

//var close = document.getElementById('close');
var vidOverlay = document.getElementById('videoOverlay');
var vid = document.getElementById('video');

// https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
    alert('ready1');
    // create the global player from the specific iframe (#video)
    player = new YT.Player('video', {
        events: {
            // call this function when player is ready to use
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    alert('ready2');
    // bind events
    var playButton = document.getElementById("playButton");
    playButton.addEventListener("click", function () {
        vidOverlay.style.display = 'none';
        player.playVideo();
    });

}

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