JSFiddle - React, Tailwind, and code Playground

by telizpablo

HTML

<a id="play" href="#">Play</a>
<a id="pause" href="#">Pause</a>
<a id="stop" href="#">Stop</a>

<iframe id="popup-youtube-player" width="640" height="360" src="https://www.youtube.com/embed/geTgZcHrXTc?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>

JavaScript

$('#play').on('click', function() {
$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');    
});
$('#pause').on('click', function() {
$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');    
});
$('#stop').on('click', function() {
$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    
});