title: Recursive custom thumbnail for embedded YouTube API won't replay
body: <p>I have an embedded YouTube video, but I want to use my own custom image for the face (thumbnail) of the video before <strong>and after</strong> the video plays. I have it working successfully up to where it shows the custom image in place of the video, and when the image is clicked, the image is removed and the video is loaded and played. Once the video is complete, the image is restored back to what appears to be the video's ready-to-play state. </p>
  
  <p>However, once the image is clicked again to replay the video, the video won't play again. I was hoping that every time my playYouTubeVideo() function is called from the click event listener, that the YT.Player object would reset and load again, but this isn't working. </p>
  
  <p>Any help you can give would be appreciated.</p>
  
  <p>The stackoverflow snippet I created as a demo doesn't actually play the YouTube embed, and you kind of need to be able to see the video end to know what I mean, so I've included and link to a fiddle as well:</p>
  
  <p><a href="https://jsfiddle.net/MichaelVanEs/otq74r3w/3/" rel="nofollow noreferrer">https://jsfiddle.net/MichaelVanEs/otq74r3w/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    handleYouTubePlayer();
  });
  //
  function handleYouTubePlayer() {
    // YouTube iPlayer API
    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;
    var playerContainer = document.getElementById("player");
    var iFrameVideo = document.getElementById("iFrameVideo");
    var thumbnailWrap = document.getElementById("thumbnailWrap");
    //
    thumbnailWrap.addEventListener("click", playYouTubeVideo, false);
    //
    function playYouTubeVideo() {
      console.log("Comes into playYouTubeVideo");
      iFrameVideo.style.display = "block";
      thumbnailWrap.style.display = "none";
      //
      player = null;
      //
      player = new YT.Player("iFrameVideo", {
        playerVars: {
          mute: 1,
          autoplay: 1,
        },
        events: {
          "onReady": onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
      //
      function onPlayerReady(event) {
        console.log("Comes into onPlayerReady");
        event.target.mute();
        event.target.playVideo();
      }
      //
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) { // Video has finished playing
          console.log("Comes into PlayerState.ENDED");
          thumbnailWrap.style.display = "block";
          iFrameVideo.style.display = "none";
          //
          event.target.pauseVideo();
          event.target.seekTo(0, true);
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imgBrd {
    box-shadow: 0 0 0 1px #ccc;
  }
  
  .vid {
    display: block;
    width: 550px;
    height: 309px;
    margin: 0 auto;
  }
  
  #player {
    position: relative;
  }
  
  #iFrameVideo {
    display: none;
  }
  
  #thumbnailWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  #thumbnail {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  #youtubeBtn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    color: rgba(40, 40, 40, 0.95);
    height: 100%;
    width: 100%;
    z-index: 2;
  }
  
  #youtubeBtn:hover {
    cursor: pointer;
    color: rgba(255, 0, 0, 0.95);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;div id="player" class="vid"&gt;
    &lt;div id="thumbnailWrap"&gt;
      &lt;img id="thumbnail" class="vid imgBrd" src="https://libapps-au.s3-ap-southeast-2.amazonaws.com/customers/4753/images/dragArticleToGroup-thumb.png" alt="Video thumbnail" /&gt;
      &lt;div id="youtubeBtn"&gt;
        &lt;i class="fa fa-youtube-play" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;iframe id="iFrameVideo" class="vid" src="https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?rel=0&amp;vq=hd720&amp;enablejsapi=1" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>