title: Youtube iframe api not playing video on Edge / IE
body: <p>I need to make a youtube player that has a custom play button and a custom image preview, when clicked both elements (play button and image preview) hide and the video starts to play. I have found the following code online which works fine on Firefox and Chrome but on Edge and IE when you click the play button the elements hide but the video does not play automatically, console displays the error "Object doesn't support property or method 'playVideo'". </p>
  
  <p>Can anyone help me or give me some pointers as my JavaScript is not that great and im going round in circles. Once ive sorted this issues I need adapt the code so that it allows me to have two videos on the same page.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;title&gt;&lt;/title&gt;  
  
      &lt;style type="text/css"&gt;
          button {
              position: absolute;
              top: 106px;
              padding: 12px;
              left: 174px;
          }
          .wrap{
              width: 960px;
              margin: 0 auto;
          }
          .videoWrap{
              width: 500px;
              height: 270px;
              position: relative;
          }
          .start-video {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              height: 50px;
              width: 50px;
              margin: auto;
              opacity: .3;
  
              cursor: pointer;
  
              transition: all 0.3s;
          }
  
          .start-video:hover
          {
              opacity: 1;
              -webkit-filter: brightness (1);
          }
          iframe{
              width: 100%;
              height: 100%;
              max-height: 100%;
              max-width: 100%;
          }
  
          .thumbnail_container
          {
              width: 100%;
              height: 100%;
              overflow: hidden;
              background-color: #000;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
          }
  
          img.thumbnail
          {
              margin-top: -50px;
              opacity: 0.5;
          }
      &lt;/style&gt;    
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrap"&gt;
          &lt;div class="videoWrap"&gt;
              &lt;div id="player"&gt;&lt;/div&gt;
              &lt;div id="thumbnail_container" class="thumbnail_container"&gt;
                  &lt;img class="thumbnail" id="thumbnail" /&gt;
              &lt;/div&gt;
              &lt;a class="start-video"&gt;&lt;img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.youtube.com/iframe_api"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var player;
  
      onYouTubeIframeAPIReady = function () {
          player = new YT.Player('player', {
              height: '244',
              width: '434',
              videoId: 'AkyQgpqRyBY',  // youtube video id
              playerVars: {
                  'autoplay': 0,
                  'rel': 0,
                  'showinfo': 0
              },
              events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
              }
          });
      }
  
      function onPlayerReady(event) {
          console.log('player ready');
          event.target.playVideo();
      }
  
  
      var p = document.getElementById ("player");
      $(p).hide();
  
      var t = document.getElementById ("thumbnail");
      t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";
  
      onPlayerStateChange = function (event) {
          if (event.data == YT.PlayerState.ENDED) {
              $('.start-video').fadeIn('normal');
          }
      }
  
      $(document).on('click', '.start-video', function () {
          $(this).hide();
          $("#player").show();
          $("#thumbnail_container").hide();
          player.playVideo();
      });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>