Youtube Javascript API: start parameter not working on replay

Question

I'm working with the Youtube Javascript API (iframe version) and I'm using start and end parameters in order to play a portion only of a video. While everything works fine, once the end is reach, the player stop (normal behavior). However, when clicking again on play, the player does not seems to considering the start option. It always restart playing from the beginning of the video. It ends however at the defined end value, always.

<iframe frameborder="0" src="https://www.youtube.com/embed/5lGoQhFb4NM?autoplay=1&autohide=1&modestbranding=1&showinfo=0&controls=0&vq=hd720&rel=0&start=60&end=100" style="width: 100%; height: 400px;"></iframe>

Do you guys have any idea on why it is happening?

@httpete Well, since I was originaly using Angular, I ended up using https://github.com/brandly/angular-youtube-embed which which allowed me to reload the iframe using the event `youtube.player.ended`. If you are interested, I will post my solution here as an answer, just let me know :) — lkartono, Aug 31 '16 at 21:13

score 0 · Answer 1 · answered Feb 24 '17 at 04:35

Here's how I was able to have the replay button start over at the original start time, as well as prevent users from scrolling outside the start/end bounds of the playerVars:

function onPlayerStateChange(event) {

  var isClip = playerOptions.playerVars.start && playerOptions.playerVars.end;
  var start = isClip ? playerOptions.playerVars.start : null;
  var end = isClip ? playerOptions.playerVars.end : null;

  if (event.data == YT.PlayerState.PLAYING) {
    if (isClip) {
      var currentTime = event.target.getCurrentTime();
      if (currentTime < start || currentTime > end) {
        event.target.seekTo(playerOptions.playerVars.start);
      }
    }

  }

}

score 0 · Answer 2 · edited Aug 08 '20 at 12:57

I've tried the above solution without succes (error console : "playerOptions is not defined")

But thx to this topic YouTube API - Loop video between set start and end times I've been able to successfully get the start/end parameters on replay :

 <script>
// 5. The API calls this function when the player's state changes.
  var done = false;
  function onPlayerStateChange(event) {
   
    if (event.data == YT.PlayerState.ENDED) {
        var playButton = document.getElementById("play");
        playButton.addEventListener("click", function() {
            player.loadVideoById({
                  videoId: videoId,
                  startSeconds: startSeconds,
                  endSeconds: endSeconds
            });
        });
        document.getElementById("play").style.cssText = "visibility:visible";
    }  
  }
 </script>

Explanations : in my case, I'm using a button id="play" to start the video. When the video is ENDED, the button #play is set to visibility:visible and the click event uses the player.loadVideoById corresponding parameters. If you don't use the click event, the video will auto loop with the desired start/end values.

From Youtube API reference = https://developers.google.com/youtube/iframe_api_reference?hl=fr#Getting_Started

Youtube Javascript API: start parameter not working on replay

2 Answers2