Youtube – Have an embedded YouTube video loop + end at specified time, every time it plays

embedyoutube

So, to know exactly what I'm trying to do, I suppose it's best to look at my code below:

<iframe class="youtube-player" type="text/html" width="280" height="35" src="http://www.youtube.com/embed/XejH7tnOVKA?vq=tiny&autoplay=1&fs=0&iv_load_policy=3&loop=1&rel=0&showinfo=0&color=white&autohide=0&disablekb=1&end=10&playlist=XejH7tnOVKA" frameborder="0"></iframe>

Basically everything works, except the following happens: The video starts playing, it ends at 10 seconds, it loops (restarts), and from that point on it just replays the whole video, instead of stopping at 10 seconds.

Is there any workaround for this? I've really searched all of the web, but I haven't been able to find anything.

PS: I used a blank video, because I don't feel like sharing the video I want to use for this. The 10 seconds is also only for ease of testing.

Best Answer

I think the below code is exactly what you want. I did this by combining https://developers.google.com/youtube/iframe_api_reference and Iframe API.

Just replace the video iD, and test it on your local pc.

<div id="myvideo"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
var videoId='Your Video ID';
var startSeconds = 4;  // set your own video start time when loop play
var endSeconds = 27;   // set your own video end time when loop play
var playerConfig = {
  height: '250',
  width: '100%',
  videoId: videoId,
  playerVars: {

    autoplay: 1,            // Auto-play the video on load
    controls: 0,            // Show pause/play buttons in player
    showinfo: 0,            // Hide the video title
    modestbranding: 1,      // Hide the Youtube Logo
    fs: 1,                  // Hide the full screen button
    cc_load_policy: 0,      // Hide closed captions
    iv_load_policy: 3,      // Hide the Video Annotations
    start: startSeconds,
    end: endSeconds,
    autohide: 0, // Hide video controls when playing
  },
  events: {
       'onStateChange': onStateChange,       // reference to Iframe API
        onReady: function(e) {              // mute the video when loaded
        e.target.mute();             
      }
    }
};
//excute the video in div
function onYouTubePlayerAPIReady() {

  player = new YT.Player('myvideo', playerConfig);

}
//repload the video when onStateChange=YT.PlayerState.ENDED)
function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player.loadVideoById({
      videoId: videoId,
      startSeconds: startSeconds,
      endSeconds: endSeconds

    });
  }
}

</script>
Related Topic