JSFiddle - React, Tailwind, and code Playground

by lennyekberg

HTML

<script>
    // https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });
  
  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });
  
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>


<!---->

<iframe id="video" src="http://www.youtube.com/embed/TINASKjjNfw?version=3&enablejsapi=1&start=120&end=137&autoplay=0&hl=en_US&rel=0" frameborder="0" allowfullscreen></iframe>

<hr>

<a id="play-button" href="#">play</a>

<strike><a id="pause-button" href="#">pause</a></strike>

CSS

iframe {
  width: 300px;
  height: 200px;
/*   visibility: hidden; */
}


body {
  padding: 1rem;
}