How to loop 1 Video

JavaScript
1

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

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

3

It only works with playlists then.

4

Separately, the playerVars supports loop as well.

5

Separately, what does that mean?

loop:1 or true would work with 1 video?

or should work?

6

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?

7

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:

8

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
    };
9

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

1 Like
10

IFrame embeds means only the html iframe embed video.

11

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.

12

I get an error:

https://jsitor.com/4Rs5ln5Ou7

player.playVideo is not a function

13

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.

14

I don’t think you clicked update on it.

https://jsitor.com/DXuK8MssOc

I don’t see the above code in there.

15

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
16

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.

17

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