JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<iframe width="250" height="250" src="https://www.youtube.com/embed/q1_AJWZajEk?html5=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe width="250" height="250" src="https://www.youtube.com/embed/pnbJEg9r1o8?html5=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br/>
<button class="start">
Start
</button>
<button class="stop">
stop
</button>
JavaScript
$(document).ready(function() {
console.log("ready");
$(".start").click(function(e) {
e.preventDefault();
console.log("Start");
// Start
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
});
})
$(".stop").click(function(e) {
e.preventDefault();
console.log("Stop");
// Stop
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
})
})