Display video with icon click

by monalisa_28

HTML

<p><a href="javascript:;" onClick="toggleVideo();"><img src="https://addplaybuttontoimage.way4info.net/Images/Icons/26.png" alt="play" height="50"></a></p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:50%;top:50%;width:800px;background-color:#ffffff;height:600;display:none;">
   <iframe width="800" height="600" src="https://www.youtube.com/embed/fQOuO6w9CR0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <a href="javascript:;" onClick="toggleVideo('hide');"><img src="https://icon-library.com/images/close-icon/close-icon-12.jpg" alt="close" height="30"></a>
   </div>

JavaScript

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    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":""}','*');
}