JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hoc-toolbar" >
    <button id="hide-video-button">Hide Video</button>
    <button id="submit-your-game-button">Submit Your game</button>
</div>
<div id="you-tube-div">
   <iframe width="420" height="315" src="//www.youtube.com/embed/fQ2Lnln2BOk" frameborder="0" allowfullscreen></iframe>
</div>

JavaScript

$(document).ready(function () {
  
    $("#hide-video-button").click(this, function() {
        if($("#you-tube-div").css("display") == "none") {
            toggleVideo();
            $("#you-tube-div").css("display", "block");
            $("#hide-video-button")[0].innerHTML = "Hide Video";
        }
        else {
            toggleVideo('hide');
            $("#you-tube-div").css("display", "none");
            $("#hide-video-button")[0].innerHTML = "Show Video";
        }	
    });
    
    

});

//via: http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("you-tube-div");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}