CODEWITHSUNDEEP
javascriptiframeyoutubeyoutube-api
Jordan Carter
Jordan Carter

Reputation: 1336

Fade in and Out Youtube Video with JavaScript API

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 (most of it is from Google):

HTML

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

    <script>
  // 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 <iframe> (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 && !done) {
        event.target.style.opacity = 0; 
        setTimeout(stopVideo, 6000);
        done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

CSS

#player{
opacity: 0;
transition: all 1s;

}

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

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

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

      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="http://www.youtube.com/player_api"></script>

      <script>

          // 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();
              }
          }

          </script>
      </body>
  </html>

Upvotes: 1

Views: 1992

Answers (1)

Zayn Ali
Zayn Ali

Reputation: 4915

Try this

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

      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="http://www.youtube.com/player_api"></script>

      <script>

          // create youtube player
          var player;
          function onYouTubePlayerAPIReady() {
              player = new YT.Player('player', {
                  height: '390',
                  width: '640',
                  videoId: '0Bmhjf0rKe8',
                  playerVars: {
                      modestbranding: 1
                  },
                  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();
              }
          }

          </script>
      </body>
  </html>

However

You cannot remove the watermark

Reference YouTube API

modestbranding: This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.

Upvotes: 3

Related Questions