Questions about the YouTube player_api code


#82

I think that’s about as good as you’re going to get it.


#83

One last thing.
https://jsfiddle.net/hzyrfkwb/399/

How would I be able to add width. height to this one?

Would it be done the same way using this?
const defaultPlayerVars = {

But a different name?

loadPlayer(".jacketc", {
  start: 900,
  end: 1200,
  width: 600,
  height: 338,
});

Code:


  function addVideo(video, desiredPlayerVars) {
    const videoId = video.getAttribute("data-id");
    const defaultPlayerVars = {
      autoplay: 1,
      controls: 1,
      showinfo: 1,
      rel: 0,
      iv_load_policy: 3,
      cc_load_policy: 0,
      fs: 0,
      disablekb: 1
    };
    const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
    players.push(new YT.Player(video, {
      width: 198,
      height: 198,
      videoId: videoId,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    }));
  }

#84

width and height aren’t things that are controlled via playerVars, so we’ll need to update things first before we can add in width and height control.

Do you want to take some shortcuts when doing this, mixing information in playerVars even though it doesn’t belong there? Or do you want to do things in more of a proper way?


#85

Let’s do the proper way first and see how that looks.

I was thinking this:


const defaultSomething = {
      width: 198,
      height: 198,
      videoId: videoId,
 };

#86

Okay, in the addVideo function, add a new parameter to the end of the addVideo parameters, called opts.
Then in the init function add opts as a third argument when calling the addVideo function.

That plan is to get everything working using that opts parameter, so that the other ones can eventually be removed.


#87

https://jsfiddle.net/hzyrfkwb/401/

  function addVideo(video, desiredPlayerVars, opts) {
    const videoId = video.getAttribute("data-id");
    const defaultPlayerVars = {
      autoplay: 1,
      controls: 1,
      showinfo: 1,
      rel: 0,
      iv_load_policy: 3,
      cc_load_policy: 0,
      fs: 0,
      disablekb: 1
    };

#88

Now instead of video.getAttribute, update that so that it gets it from opts instead, with opts.video.getAtttribute

Does everything still work after doing that?


#89

no.
https://jsfiddle.net/hzyrfkwb/404/


#90

That has confirmed that my instructions about the init function have not yet been done.


#91

I did what you said.
const videoId = opts.video.getAtttribute("data-id");


#92

There was something about the init function that should have been done before that. Can you find those instructions that I gave?


#93

in the init function add opts as a third argument when calling the addVideo function.

opts is already there:


  function init(opts) {
    const playerVars = opts.playerVars || {};
    load.js("https://www.youtube.com/player_api").then(function() {
      YT.ready(function() {
        addVideo(opts.video, playerVars);
      });
    });
  }
  return {
    init
  };
}());

#94

It’s not there in the way that I instructed.


#95

This:?
addVideo(opts.video, playerVars, opts);

https://jsfiddle.net/hzyrfkwb/405/


#96

Yes like that.


#97

What next?


#98

That code is still not working, so I’ll just compare it with my notes to figure out what’s wrong.


#99

You have a spelling mistake.

“getAtttribute”


#100

got it:
https://jsfiddle.net/hzyrfkwb/406/


#101

Now instead of using getAttribute, we’ll use the more proper way using dataset.

opts.video.dataset.id;