JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<a href="javascript:void callPlayer('playVideo')">Start</a> &bull; <a href="javascript:void callPlayer('pauseVideo')">Pause</a> &bull; <a href="javascript:void callPlayer(&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the called function
<br />
<div id="whateverID">
    <iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
</div>

JavaScript

function callPlayer(func, args) {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; ++i) {
        if (iframes[i]) {
            var src = iframes[i].getAttribute('src');
            if (src) {
                if (src.indexOf('youtube.com/embed') != -1) {
                    iframes[i].contentWindow.postMessage(JSON.stringify({
                        'event': 'command',
                        'func': func,
                        'args': args || []
                    }), "*");
                }
            }
        }
    }
}