Video: Embed YouTube with external controls

gistfile1.txt

<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?showinfo=0&amp;rel=0&amp;wmode=opaque&amp;autohide=1&amp;autoplay=1&amp;enablejsapi=1&amp;html5=1" frameborder="0" allowfullscreen></iframe>


<script>

// http://css-tricks.com/play-button-youtube-and-vimeo-api/
// 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>