I'm trying to get the 'player_api' script to work with a single player

JavaScript
1

I’m trying to get a single player to work

Using this:
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

I thought by just adding this to the html part that it would work, like with the one that uses multiple players. But it doesn’t.

What would need to be changed in the single player code for it to work?

I’m confused on how this would be done.

(function iife() {
  "use strict";

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

  function onPlayerStateChange(event) {
    const player = event.target;
    const playerVars = player.b.b.playerVars;
    if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
      player.seekTo(playerVars.start);
    }
  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        loop: true,
        start: 200,
        end: 204
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());

This one uses multiple players:

2

You removed too much. One of the iife sections below the video player is needed.

3

What next?

(function manageCover() {
  "use strict";
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
  "use strict";

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

  function onPlayerStateChange(event) {
    const player = event.target;
    const playerVars = player.b.b.playerVars;
    if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
      player.seekTo(playerVars.start);
    }
  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        loop: true,
        start: 200,
        end: 204
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

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

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

Check the browser console for errors.

5

I saw that, but I don’t get it.

I tried this:
videoPlayer.init(wrapper.querySelector(".video"));

6

It might help if you understood what the error is saying. What does it say for you?

1 Like
7

videoPlayer isn’t mentioned a lot in the code.

It’s only in 2 spots.

8

That doesn’t sound like an error that a browser would normally give.

1 Like
9

I tried this:
const videoPlayer = new YT.Player(video, {

10

You still haven’t told us about the error that’s being reported.

11

TypeError: videoPlayer is undefined

This line:
videoPlayer.init();

12

In which code? You have many variations out there.

13

This line:
videoPlayer.init();

14

No silly. A link to the code.

15

videoPlayer.init();

16

That’s odd. My Chrome browser says nothing about videoPlayer in the error. I’ll try with Firefox.

Okay, I think that I understand why videoPlayer is undefined. You take a look at the code.
What is being assigned to videoPlayer?

17

(function makeVideoPlayer() {

or

.init();

18

And what happens at the end of that function?

19

“use strict”;

20

No, that’s always at the start of a function.

What happens at the end of the makeVideoPlayer function?