JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<script src="https://rawgit.com/WatersChurch/youtube_controller/master/js/youtube_controller.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
    <div id="player_1" class="video embed-responsive-item"></div>
</div>

<div id="player_2" class="video hidden"></div>

<div id="btn-holder">
    <button id="play" class="btn btn-primary">play</button>
    <button id="pause" class="btn btn-default">pause</button>
</div>

JavaScript

$("#player_1").YTController({
    playerVars: {
        controls: 0,
        showinfo: 0,
        autohide: 1,
        disablekb: 1
    },
    videoId: "Kf0lp6FVQAs"
});

$("#player_2").YTController({
    videoId: "WpyfrixXBqU",
    onReadyEvtHandler: function(){
        $('#play').trigger('click');
    }
});

$('#play').on('click',function(){
    $('.video').each(function(){
         $(this).data('plugin_YTController').unmute();
    }); 
    $("#player_1").data('plugin_YTController').play();
    setTimeout(function () {
        $("#player_2").data('plugin_YTController').play();
        $("#player_1").data('plugin_YTController').mute();
    }, 1200);
});

$('#pause').on('click',function(){
    $('.video').each(function(){
         $(this).data('plugin_YTController').pause();
    });  
});