How to loop 1 Video

To loop 1 video, how do you do that in the code?

Can that be done with a single video?

I tried loop:1, and loop: true, those didn’t work.

In order to use loop, does it have to be a playlist?

https://jsitor.com/DXuK8MssOc

(function manageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const video = cover.parentElement.querySelector(".wrap");
    show(video);
  }

  const cover = document.querySelector(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }

  function addPlayer(video) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".jacket");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}

(function initCover() {

  function coverClickHandler() {
    videoPlayer.play();
  }

  const cover = document.querySelector(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());

The iframe api reference tells us that player.setLoop is how looping is defined.

It only works with playlists then.

Separately, the playerVars supports loop as well.

Separately, what does that mean?

loop:1 or true would work with 1 video?

or should work?

It means that there are two ways to define looping. One for a playlist, and one for a single video.

That doesn’t work by itself. Did you read what it says at the playerVars parameters section about loop?

This:

In the case of a single video player, a setting of 1 causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video.

Supported values are 0 and 1 , and the default value is 0 .

Note: This parameter has limited support in IFrame embeds. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

It’s not looping: loop: 1,

Maybe I am doing something wrong.
https://jsitor.com/DXuK8MssOc

    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      rel: 0
    };

Please pay close attention to the Note part of what you quoted from the documentation.

1 Like

IFrame embeds means only the html iframe embed video.

Your code is an iframe embed too, because of the following:

    player = new YT.Player(video, config);

That causes the following video HTML:

<div class="video video-frame"  data-id="-SiGnAi845o"></div>

to be replaced with:

<iframe class="video video-frame" data-id="-SiGnAi845o" ...></iframe>

Which is an iframe embed.

I get an error:

https://jsitor.com/4Rs5ln5Ou7

player.playVideo is not a function

Here is a setLooping function that ensures that loop and playlist are both appropriate set together at the same time.

  function setLooping(config, video) {
      config.playerVars.loop = 1;
      config.playerVars.playlist = video.dataset.id;
  }

That is most easily run before creating the new player:

    setLooping(config, video);
    player = new YT.Player(video, config);

The code that you had at https://jsitor.com/DXuK8MssOc has been updated and seems to be working well.

I don’t think you clicked update on it.

https://jsitor.com/DXuK8MssOc

I don’t see the above code in there.

That’s going to be a connection trouble on my part. I’ve tried to update again and now see confirmation at the bottom right that it happened.

1 Like

Thank you, now I know how that would work.
I thought it was only able to be done with a playlist, not a single video.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.