JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"  allowfullscreen></iframe>

<iframe class="sss" src="//www.youtube.com/embed/73sgatbknvo?enablejsapi=1&amp;autoplay=1&amp;start=10&amp;end=14"></iframe>

<iframe class="sss" src="//www.youtube.com/embed/KHQDGohpBsQ?enablejsapi=1&amp;autoplay=1&amp;start=60&amp;end=70"></iframe>

<!--
 <div class="carousel-caption" data-start="10" data-end="14" data-video="73sgatbknvo"
         style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
    </div>
    
        <div class="carousel-caption" data-start="60" data-end="70" data-video="KHQDGohpBsQ"
         style="width:939px; height:528px; background-image:url(http://e2.365dm.com/16/04/16-9/30/ronny-deila-celtic-scottish-premiership_3458079.jpg)">
    </div>
-->

CSS

.carousel-caption {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .carousel-caption iframe {
        border-style: none;
        height: 100%;
        width: 100%;
    }

JavaScript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('sss', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  console.log("my state changed");
}




$('.carousel-caption[data-video]').one('click', function() {
    $(this).html('<iframe id="sss" src="//www.youtube.com/embed/'+$(this).data("video")+'?enablejsapi=1&autoplay=1&start=' + $(this).data("start") + '&end=' + $(this).data("end") + '"></iframe>');
});