JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div><a href="#" class="play-video">Play Video</a></div>
<div><a href="#" class="stop-video">Stop Video</a></div>
<div><a href="#" class="pause-video">Pause Video</a></div>

<iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>

JavaScript

let videoIframeContent = $('#video')[0].contentWindow;

$('a.play-video').click(function() {
  videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "playVideo" }), '*');
});

$('a.stop-video').click(function() {
  videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');
});

$('a.pause-video').click(function() {
  videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');
});