Fade in and Out Youtube Video with JavaScript API
<p>I am trying to fade in an iframe containing a YouTube video when the video starts, and fade it out when it ends (before it shows the still image with the red player button in the middle). Right now, the video is stuck at opacity: 0. It's like the code isn't detecting the start of the video. Here is my code (<a href="https://developers.google.com/youtube/iframe_api_reference#Getting_Started" rel="nofollow">most of it is from Google</a>):</p>

<p>HTML</p>

<pre><code>    &lt;iframe id="player" 
        width="560" height="315" 
        src="https://www.youtube.com/embed/-K2fShrbvfY?modestbranding=1&amp;rel=0&amp;controls=0&amp;enablejsapi" 
        frameborder="0" allowfullscreen
    &gt;&lt;/iframe&gt;

    &lt;script&gt;
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an &lt;iframe&gt; (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.style.opacity = 1; 
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING &amp;&amp; !done) {
        event.target.style.opacity = 0; 
        setTimeout(stopVideo, 6000);
        done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
&lt;/script&gt;
</code></pre>

<p>CSS</p>

<pre><code>#player{
opacity: 0;
transition: all 1s;
</code></pre>

<p>}</p>

<p>I also tried <code>document.getElementById('player').style.opacity = 1;</code> instead of <code>event.target.style.opacity = 1;</code> , but it still does not fade the video in.</p>

<p>New code, thanks to help from below. However, I still get the YouTube water mark and the still image at the end.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #player {
              display:  none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
      &lt;div id="player"&gt;&lt;/div&gt;

      &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.youtube.com/player_api"&gt;&lt;/script&gt;

      &lt;script&gt;

          // create youtube player
          var player;
          function onYouTubePlayerAPIReady() {
              player = new YT.Player('player', {
                  height: '390',
                  width: '640',
                  videoId: '0Bmhjf0rKe8',
                  playerVars: {
                      modestbranding: 1,
                      rel: 0,
                      controls: 0,
                      showinfo: 0
                  },
                  events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                  }
              });
          }

          // autoplay video
          function onPlayerReady(event) {
              $('#player').fadeIn(function() {
                  event.target.playVideo();
              });
          }

          // when video ends
          function onPlayerStateChange(event) {        
              if (event.data === 0) {          
                  $('#player').fadeOut();
              }
          }

          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
</code></pre>