Why does autoplay start playing the video?

autoplay is set to 0 on both of these

Compare this code:
https://jsitor.com/3Yjovw1cth

To the 2 player code:
https://jsitor.com/zaW8K3pmC

There seems to be a communication problem because I’m not understanding what you want to achieve.
It must be break time for me.

What extra benefit is this, if I remove it, the code still works?

function onYouTubeIframeAPIReady() {
}

Shouldn’t it be attached to other code?


const wrapper = cover.nextElementSibling;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);

From which code are you removing it?

This one:
https://jsfiddle.net/fsrz4nta/

Removed: still works
https://jsfiddle.net/d0zymrjp/

The code in onYouTubeIframeAPIReady will normally work.

It doesn’t work when abnormal things occur, such as when iframe_api is slow to get going.

The onYouTubeIframeAPIReady function protects you from such things.

1 Like

After all, as Google says on their reference page (which I think you haven’t read),

2 Likes

If I don’t want YouTube to start playing after clicking on the cover, what would be changed in the code?

https://jsitor.com/3Yjovw1cth

This:

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

Would get changed to this:

      }
    });
  }
  
  return {
    addPlayer
  };
}());

This:
videoPlayer.play();

Would be removed from here:

 function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
  }

https://jsitor.com/fVsSScJlM

Is this right?

That seems about right.

1 Like

Redefinition of ‘player’ from line 20.
const player = event.target;

In Here

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

https://jsfiddle.net/jewhfdkt/1/

Removing the const from player fixes that.

Why does jsfiddle say this?

https://jsfiddle.net/fsrz4nta/

It doesn’t like the guard condition. It’s totally valid, but it will prefer this other way:

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

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

How would this piece be converted from .forEach to for Loop instead?

I have one code that uses all .forEach, and another that uses for Loop.

For learning purposes.

  function initCovers(coverOpts) {
    coverOpts.forEach(function (opts) {
      init(opts);
    });
  }

Loop codes are best to be avoided, because the index markers become confusing at best and can be completely messed up at worst.

forEach has been the standard for well over a decade. Don’t go back.

As I understand it, playVideo(); only gets used on codes where a cover is being used, right?

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

I’m confused about something.

Is function addPlayer(video)

only being used for when there is only a single player being used.

and
function addVideo(video, settings) {

gets used for when multiple videos are being used on a page?

Do I have that right?

That makes sense. When there is no cover a person can just play the video themself.

1 Like

They can both be used in the opposite situations too, but the addVideo function is more capable.

As the addVideo function name seems to be too generic, I would have addPlayer(video, settings) as the function instead, as the settings are specific to the youtube video player.

1 Like

21 posts were split to a new topic: Why is playVideo() not in the code?