Troubleshooting playerVars on embedded youtube

JavaScript
1

This is the other code:

I just checked, it doesn’t seem to use the same exact code as the other one.
https://jsfiddle.net/c0a7kdws/

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

There, it makes sense to combine defaults and playerOptions structure with just defaultOptions instead.

3

What does that mean?

This would be changed to what?

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

I think I almost got it.

The videos go on, but the playerVars don’t work in the code.
https://jsfiddle.net/j512ofLs/

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

or, would I be changing other spots in the code?

Original working code:
https://jsfiddle.net/c0a7kdws/

4

What that means is that instead of defaults with playerOptions inside of it, you just have a defaultOptions object.

  const defaultOptions = {
      playerVars: {

And instead of referring to defaults.playerOptions, you refer instead to defaultOptions.

5

This gets changed to:

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

This:

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

This gets changed to:

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

This?

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

For some reason this is not working in the code.
start: 45

or, any settings I put inside there.

The videos and playlist works, it’s just the settings, vars that are placed in there that don’t work.
https://jsfiddle.net/jcb6xvrs/

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

That’s because start and any other playerVars properties should go inside of a playerVars object.

7

When set like this:
https://jsfiddle.net/ro04qb53/

Start is not inside this playerVars.

    const defaults = {};
    defaults.playerVars = {
    };

This Works

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

When set like this
https://jsfiddle.net/jcb6xvrs/

const defaultOptions  = {
      playerVars: {

This does not work.

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

What am I doing wrong in this code that I should be doing?

I think something would need to be adjusted here:

  const playerOptions = combinePlayerOptions(defaultOptions, settings);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }
8

It works when start is inside of playerVars. Leave it inside of playerVars. That’s where it belongs. https://developers.google.com/youtube/player_parameters#IFrame_Player_API

The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.

9

But it still doesn’t work when start is in the playerVars.

See:
https://jsfiddle.net/oL471ypm/

 const defaultOptions  = {
      playerVars: {
        start:0, 
      }
    }

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

Put that start in its own playerVars and it will work.

26

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