Another youtube button

HTML

<h1>Pause / Play Buttons for YouTube Videos</h1>

<!-- Make sure ?enablejsapi=1 is on URL -->
<div id="video"></div>

<!-- 
SVG ==
http://thenounproject.com/term/play/23255/ 
http://css-tricks.com/svg-tabs-using-svg-shape-template/
-->
<svg class="defs">
  <defs>
    <path id="pause-button-shape"  d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M21,33.064c0,2.201-1.688,4-3.75,4
	s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z M34.5,33.064c0,2.201-1.688,4-3.75,4
	s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z"/>
    <path id="play-button-shape"  d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M31.672,26.828l-9.344,9.344
	C20.771,37.729,19.5,37.2,19.5,35V13c0-2.2,1.271-2.729,2.828-1.172l9.344,9.344C33.229,22.729,33.229,25.271,31.672,26.828z"/>
  </defs>
</svg>

<div class="buttons">
  <!-- if we needed to change height/width we could use viewBox here -->
  <svg class="button" id="play-button">
    <use xlink:href="#play-button-shape">
  </svg>
  <svg class="button" id="pause-button">
    <use xlink:href="#pause-button-shape">
  </svg>
</div>

CSS

.button {
  width: 48px;
  height: 48px;
  cursor: pointer;
  &:hover {
    fill: white; 
  }
}

.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

iframe {
  float: left;
  width: 0px;
  height: 0px;
}

.buttons {
  padding: 1rem;
  background: #f06d06;
  float: left;
}

body {
  padding: 1rem;
}

JavaScript

// 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', {
          width: '1',
        height: '1',
        videoId: 'ypVUjBGVoGQ',
        playerVars: {
            autoplay: '1',
            start: '0',
            controls: '0',
            showinfo: '0',
            modestbranding: '0',
            color: 'white',
            playlist: 'wlb-HWpDDx0,'
            },
    events: {
      // call this function when player is ready to use
      'onReady': initialize
    }
  });
}

function initialize(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);