Adding combinePlayerOptions into existing code

asasass · September 8, 2021, 9:23am

I have 2 versions.

defaults.playerVars;
https://jsfiddle.net/xs9gL24c/

  const defaults = {};
  defaults.playerVars = {
    autoplay: 0,
    controls: 0,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3
  };

defaults.playerOptions;
https://jsfiddle.net/c0a7kdws/

  const defaults = {
    playerOptions: {
      playerVars: {
        autoplay: 0,
        controls: 0,
        disablekb: 1,
        enablejsapi: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0
      }
    }
  };

Paul_Wilkins · September 8, 2021, 9:33am

Let’s go with the defaults.playerVars one at https://jsfiddle.net/xs9gL24c/

The combinePlayerOptions function can go between manageCover and videoPlayer, as that combinePlayerOptions function is intended to be used by the code below it.

In the videoPlayer’s addPlayer function we can update the following code:

    const defaultVars = defaults.playerVars;
    const playerVars = settings.playerVars;
    defaults.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, defaults);

and replace it using combinePlayerOptions

    const playerOptions = combinePlayerOptions(defaults, settings);
    const player = new YT.Player(video, playerOptions);

In the addPlayer’s createPlayerOptions function we can also replace the following code:

  function createPlayerOptions(settings) {
    const defaultOptions = defaults.playerVars;
    const defaultPlayerVars = defaultOptions.playerVars;
    const playerVars = Object.assign({}, defaultPlayerVars, settings);
    defaults.playerVars = playerVars;
    return defaults;
  }

It’s not appropriate for defaults to be updated there. Instead we just want to combine defaults and settings and return the combined lot.

  function createPlayerOptions(settings) {
    const playerOptions = combinePlayerOptions(defaults, settings);
    return playerOptions;
  }

When you use that combinePlayerOptions function you will no longer have any troubles happening when it comes to playerOptions and playerVars.

The updated code is found at https://jsfiddle.net/9zdbf6s0/

I now leave you to my once-per-drink frequency of replies as before.

asasass · September 8, 2021, 9:36am

playerVars are not working in the new code:
https://jsfiddle.net/9zdbf6s0/

controls: 0 are set to 0, that means they should not be visible.

They are showing in the code.

Also, this is not working in the code either.

  managePlayer.add(".playc", {
    start: 45
  });

Both work in the old code: Updated: now they both are.
https://jsfiddle.net/7hx8odys/

I removed playerVars from defaultOptions.
const defaultPlayerVars = defaultOptions/*.playerVars*/;

Paul_Wilkins · September 8, 2021, 10:17pm

This is where we make the managePlayer’s addPlayer function easier to understand.

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler(playerSettings, videoIds);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

playerSettings used to mean that it was a weird combination of both playerOptions and playerVars. That code doesn’t have a way to separate those out, so we should only use playerOptions.

  function addPlayer(coverSelector, playerOptions, videoIds) {
    const clickHandler = createCoverClickHandler(playerOptions, videoIds);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

And that change flows on through to the createCoverClickHandler function too.

  function createCoverClickHandler(playerOptions, videoIds) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions, videoIds);
      wrapper.player = player;
    };
  }

And that change flows on through to the createPlayer function

  function createPlayer(videoWrapper, playerOptions = {}, videoIds = "") {
    const video = videoWrapper.querySelector(".video");
    if (!videoIds) {
      videoIds = video.dataset.id;
    }
    playerOptions = createPlayerOptions(playerOptions);
    return videoPlayer.addPlayer(video, playerOptions, videoIds);
  }

And that createPlayerOptions function isn’t needed anymore.

  function createPlayerOptions(settings) {
    const playerOptions = combinePlayerOptions(defaults, settings);
    return playerOptions;
  }

Instead, we can use combinePlayerOptions in the createPlayer function.

        playerOptions = combinePlayerOptions(defaults, settings);
        const player = new YT.Player(video, playerOptions);

As it is playerOptions that addPlayer uses, those start properties need to be in their correct playerVars object instead, as you’ve already done with init.

    managePlayer.init({
        playerVars: {
            controls: 0
        }
    });
    managePlayer.addRandom(".playa", {
        playerVars: {
            start: 45
        }
    }, [
        "0dgNc5S8cLI",
        "mnfmQe8Mv1g",
        "-Xgi_way56U",
        "CHahce95B1g"
    ]);

The playerVars options now look to be working at https://jsfiddle.net/ro04qb53/

asasass · September 11, 2021, 9:44am

I’m having difficulty trying to update

Code 2
https://jsfiddle.net/zy15rLap/

to use combinePlayerOptions.

Something ends up breaking each time I try.

Which was successfully done here.

Updated/Newer Code 1
https://jsfiddle.net/pcgmvj7L/

Everything works in Code 2, all that is being done is adding combinePlayerOptions to it.

Paul_Wilkins · September 12, 2021, 1:24am

Let’s do the same with https://jsfiddle.net/zy15rLap/ that was done in post #2

We find the first situation where we want to combine the player options, and put the combinePlayerOptions in a place above that. The first place that we’ll want to use it is in videoPlayer’s addPlayer function, so combinePlayerOptions goes just before the videoPlayer code.

In the addPlayer function we have the following code:

    const playerOptions = Object.assign({}, defaultOptions, settings);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);

As the playerVars is all dealt with by the combinePlayerOptions function, we can remove that second line, and also the statements that define defaultVars and playerVars variables. Then we replace the first line of the above code with a call to the combinePlayerOptions function, telling it to combine both defaultOptions and settings.

The next place that options are combined is in the createPlayerOptions code.

  function createPlayerOptions(settings) {
    const defaultOptions = defaults.playerOptions;
    const playerOptions = defaultOptions.playerVars;
    const playerVars = Object.assign({}, playerOptions, settings);
    playerOptions.playerVars = playerVars;
    return playerOptions;
  }

All of that code inside of the function can be replaced with a single call to combinePlayerOptions, giving it both defaults.playerOptions, and settings.

You should also restructure that defaults object so that it is just defaultOptions, in which case you replace defaults.playerOptions to be just defaultOptions instead.

asasass · September 12, 2021, 1:44am

The first thing is this: Step 1
https://jsfiddle.net/sdga09f6/

    const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings.playerVars;
    const playerOptions = Object.assign({}, defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

Step 2:

and also the statements that define defaultVars and playerVars variables

This?
https://jsfiddle.net/sdga09f6/1/

  const defaultOptions = defaults.playerOptions;
   /* const defaultVars = defaultOptions.playerVars;*/
   /* const playerVars = settings.playerVars;*/
    const playerOptions = Object.assign({}, defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

Step 3

Then we replace the first line of the above code with a call to the combinePlayerOptions function,

https://jsfiddle.net/3mtk49fd/1/

   const defaultOptions = defaults.playerOptions;
   /* const defaultVars = defaultOptions.playerVars;*/
   /* const playerVars = settings.playerVars;*/
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

Step 4

The next place that options are combined is in the createPlayerOptions code.

  function createPlayerOptions(settings) {
    const defaultOptions = defaults.playerOptions;
    const playerOptions = defaultOptions.playerVars;
    const playerVars = Object.assign({}, playerOptions, settings);
    playerOptions.playerVars = playerVars;
    return playerOptions;
  }

All of that code inside of the function can be replaced with a single call to combinePlayerOptions, giving it both defaults.playerOptions, and settings.

Is that how it was done in Code 1?
https://jsfiddle.net/pcgmvj7L/

or, am I doing something different?

I already messed up the entire code.

I might have done some parts right.

Skipping Step 4 because I’m confused with how to do that, and I don’t know where Post # 16 is.

Step 5

You should also restructure that defaults object so that it is just defaultOptions, in which case you replace defaults.playerOptions to be just defaultOptions instead.

This?
https://jsfiddle.net/xLf56cbp/1/

 const defaultOptions = {
      playerOptions: {
        events: {
          "onReady": onPlayerReady
        },
        height: 360,
        host: "https://www.youtube-nocookie.com",
        playerVars: {
          playlist: playlist || undefined
        },
        videoId,
        width: 640
      }
    };

    const defaults = defaultOptions/*defaults.playerOptions*/;
   /* const defaultVars = defaultOptions.playerVars;*/
   /* const playerVars = settings.playerVars;*/
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

This is too complicated for me to do all at once, I can only do it in steps.

asasass · September 12, 2021, 2:00am

I don’t think Code 1 was built on Post 16
https://jsfiddle.net/pcgmvj7L/

I should not be looking to that code as a template/example then.

asasass · September 12, 2021, 2:01am

Where is [post #16] ?

I can’t find it.

Did you move it?

Paul_Wilkins · September 12, 2021, 3:24am

It was post 16 before splitting off posts to a new topic. It’s now post 2 of this topic.

asasass · September 12, 2021, 2:45pm

In Post #2 of this topic, the playerVars/settings are not working.

In Post #4 of this topic, they are working.

The best I can do is this on Code 2
Without making lines longer than 80 characters long.
https://jsfiddle.net/nm3bhywL/

But it’s not working the same as Code 1

Post #4 Is how those playerVars/settings became working again in Code 1.

In Code 1
https://jsfiddle.net/pcgmvj7L/

The playerVars/settings per video are working.

 managePlayer.addRandom(".playa", {
        playerVars: {
            start: 45
        }

    managePlayer.add(".playc", {
        playerVars: {
            start: 50
        }
    });

In Code 2, the code I edited, those are not working.

And before I started editing Code 2 those were working, you can see here.
https://jsfiddle.net/zy15rLap/

In Code 2 I edited,
https://jsfiddle.net/nm3bhywL/

I don’t know what would be adjusted in it, so that the playerVars/settings per video are working the same way as is working in Code 1.
https://jsfiddle.net/pcgmvj7L/

I don’t know why this it taking me so long to get working. Code 2 is not that much different from Code 1.

Investigating further:

Editing Code 2

Removing playerVars from settings.
const playerVars = settings/*.playerVars*/;

These are working.
https://jsfiddle.net/1Lk5eqvp/

managePlayer.addRandom(".playa", {
    start: 45
  }, [

  managePlayer.add(".playc", {
    start: 60
  });

This is not working:

managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

What was removed:

    const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings/*.playerVars*/;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

When this line is removed
/*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/

This is working:
https://jsfiddle.net/2mrzo3gy/

 managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

These are not working.

 managePlayer.addRandom(".playa", {
    start: 45
  }, [

  managePlayer.add(".playc", {
    start: 60
  });

Line Removed:

    const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings/*.playerVars*/;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

Are you able to figure out what the issue seems to be?

and how would that be fixed in the code so both are working?

Paul_Wilkins · September 12, 2021, 10:48pm

Which code should be investigated?

asasass · September 13, 2021, 12:38am

Whichever one will get to resolving the issue so both are working in the code.

When it is set with only playerVars removed from settings.

const playerVars = settings/*.playerVars*/;
https://jsfiddle.net/1Lk5eqvp/

  const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings/*.playerVars*/;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

These are working

managePlayer.addRandom(".playa", {
    start: 45
  }, [

  managePlayer.add(".playc", {
    start: 60
  });

This is not working:

managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

When this line is also removed
/*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/

https://jsfiddle.net/2mrzo3gy/

 const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings/*.playerVars*/;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

This is working:

 managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

These are not working.

 managePlayer.addRandom(".playa", {
    start: 45
  }, [

  managePlayer.add(".playc", {
    start: 60
  });

Paul_Wilkins · September 13, 2021, 1:26am

There are a number of different things that need to be taken care of with the https://jsfiddle.net/1Lk5eqvp/ code.

Structure the playerVars

The managePlayer.add and managePlayer.addRandom all use playerVars for their settings. That is the objective that we are wanting to achieve.

Rename to playerOptions

The addPlayer and addPlayerRandomVideo functions then need updating. The playerSettings function parameter was for when both the options and the playerVars were being smashed together into the one object, which later on had to be separated out again. That was not a good thing to do.

Instead of playerSettings we need to rename it to playerOptions, to help inform us that it should be a properly structured playerOptions object.

The createCoverClickHandler function now instead of receiving a smashed up playerSettings, receives instead a properly structured playerOptions object, which is already indicated in its function parameters, so no change there.

The playerOptions parameter then goes through to createPlayer. We have confirmed that playerOptions is all good there.

Fix the default options

The defaults object though needs fixing up. Instead of being a defaults object that contains a playerOptions object, it should instead just be a defaultOptions object. That’s most easily done by renameing playerOptions to defaultOptions and removing the default object that’s wrapped around it. Then in the createPlayer and init functions you can replace defaults with defaultOptions.

A console.log statement in the createPlayer function can then confirm that playerOptions is correctly structured before it goes to videoPlayer.addPlayer

Use playerOptions

In the videoPlayer.addPlayer function we have more confusion to clean up. The settings parameter is no longer a mashed up combination of playerOptions and playerVars needing separation. Instead it is a properly structures playerOptions object, so settings needs to be renamed to playerOptions.

Fix the default options

The defaults.playerOptions object can be reduced to just a defaultOptions object as was done in the managePlayer code. That also removes the need for a separate defaultOptions variable below it. All of the other code in there that deals with playerVars should be removed too, as all of that is nicely handled by the combinePlayerOptions function.

Use combinedOptions

That just leaves us with a playerOptions constant that duplicates the playerOptions function parameter, so the constant can be renamed to something more appropriate, such as combinedOptions and be used to add the new player.

After all of that things work properly.

asasass · September 13, 2021, 1:30am

Step 1: Rename to playerOptions
https://jsfiddle.net/w9Leqt6v/

Step 2: Fix the default options
https://jsfiddle.net/qncdj6sp/

asasass · September 13, 2021, 2:05am

I’m stuck on Step 3
Use playerOptions

so settings needs to be renamed to playerOptions.

https://jsfiddle.net/sgrdahte/1/

I changed settings to playerOptions here:
function addPlayer(video, playerOptions, videoIds = video.dataset.id) {

What about in here?

   const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings/*.playerVars*/;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

You said:

defaults.playerOptions object can be reduced to just a defaultOptions

const defaultOptions = defaults.playerOptions;

to:

This?
const defaultOptions = defaultOptions;

I’m confused.

After following, or, trying to follow all the instructions:
https://jsfiddle.net/xq872dtc/

  const defaultOptions = defaultOptions.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = playerOptions/*.playerVars*/;
    const combinedOptions  = combinePlayerOptions(defaultOptions, playerOptions);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

Paul_Wilkins · September 13, 2021, 3:24am

You’re on the right track. Get rid of that useless comment.

asasass · September 13, 2021, 3:32am

When set like this
https://jsfiddle.net/byhpe2rw/1/

 const defaultVars = defaultOptions.playerVars;
    const playerVars = playerOptions;
    playerOptions = combinePlayerOptions(defaultOptions, playerOptions);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

playerVars/settings per individual single video are working.

 managePlayer.add(".playc", {
    start: 60;
  });

These are not working:

 managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

When this line is removed:
/*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/

https://jsfiddle.net/Lskf7eoc/

From here:

    const defaultVars = defaultOptions.playerVars;
    const playerVars = playerOptions;
    playerOptions = combinePlayerOptions(defaultOptions, playerOptions);
    /*playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);*/
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

These are working:

 managePlayer.init({
    playerVars: {
      controls: 0,
      fs: 0
    }
  });

playerVars/settings per individual single video are not working.

 managePlayer.add(".playc", {
    start: 60;
  });

I don’t understand what the issue seems to be and how it is fixed.

The same exact issue I was having from Post #18

Starting back from where I left off, the code doesn’t work at all.
https://jsfiddle.net/xq872dtc/

  const defaultOptions = defaultOptions.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = playerOptions/*.playerVars*/;
    const combinedOptions  = combinePlayerOptions(defaultOptions, playerOptions);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

I still am not able to figure it out.
Nothing I have tried has worked.

Paul_Wilkins · September 13, 2021, 6:59am

From which code should we make further progress?

asasass · September 13, 2021, 2:10pm

Starting over, from the beginning, before any edits, to get a better grasp of what is being fixed in the code.

I’ll try explaining it better and being more precise on what the issue is.

With the code set this way:
https://jsfiddle.net/ae0Lwj5f/

  const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings;
    const playerOptions = combinePlayerOptions(defaultOptions, settings);
    playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

When controls are set to 1,

  managePlayer.init({
    playerVars: {
    controls: 1,

You can see the controls are shown here:

When controls are set to 0,
https://jsfiddle.net/nz9hxacu/

  managePlayer.init({
    playerVars: {
    controls: 0,

You can see the controls are still viewable and not hidden.

That is the only thing in the code that is being fixed.

That is the only thing in the code that is not working properly.

Controls set to 0 should look like this.

  managePlayer.init({
    playerVars: {
    controls: 0,

Starting from this code, how would that be fixed?
https://jsfiddle.net/ae0Lwj5f/

Here are examples of where controls are working.

Code 2 before combinePlayerOptions were added in.
https://jsfiddle.net/zy15rLap/

Code 1 that uses combinePlayerOptions
https://jsfiddle.net/pcgmvj7L/

Topic		Replies	Views
Troubleshooting playerVars on embedded youtube JavaScript	10	2644	December 11, 2021
Adding Const defaultPlayerVars = JavaScript	29	5107	November 22, 2021
Why is playVideo() not in the code? JavaScript	119	9819	November 18, 2021
Questions about the YouTube player_api code JavaScript	277	7813	March 29, 2019
Would it be possible or wise to now remove config from the code? JavaScript	6	821	December 19, 2022

Adding combinePlayerOptions into existing code

Structure the playerVars

Rename to playerOptions

Fix the default options

Use playerOptions

Fix the default options

Use combinedOptions

Related topics