How do I assign width, height to only 1 YouTube player?

JavaScript
1

I’m only adding it to ‘1 Player,’ not all of them.

It’s the first player on the page. I can’t figure out how to do this.

The PlayerVars are working inside here, but width, height isn’t.

Inside the javascript how would I be able to add width, height to this part of the code?

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

Full Code:
https://jsfiddle.net/hzyrfkwb/399/

The section of code where it would be worked on:

  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
      }
    }));
  }

  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
  };
}());

function loadPlayer(containerSelector, playerVars) {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function initPlayer(wrapper) {
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars
    });
  }

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    initPlayer(wrapper);
  }
  const cover = document.querySelector(containerSelector);
  cover.addEventListener("click", coverClickHandler);
}
loadPlayer(".jacketc", {
  start: 900,
  end: 1200,
  width: 600,
  height: 338,
});
loadPlayer(".playa", {
  start: 900,
  end: 1200
});
loadPlayer(".playb", {
  start: 30,
  end: 50
});
loadPlayer(".playc", {
  start: 30,
  end: 50
});
loadPlayer(".playd", {
  start: 30,
  end: 50
});
loadPlayer(".playe", {
  start: 30,
  end: 50
});
loadPlayer(".playf", {
  start: 30,
  end: 50
});
loadPlayer(".playg", {
  start: 30,
  end: 50
});
loadPlayer(".playh", {
  start: 30,
  end: 50
});
loadPlayer(".playi", {
  start: 30,
  end: 50
});
2

You could use the :first-of-type pseudo-selector:

.jacketrc:first-of-type {
  border: 5px dotted red;
}

I added that to your fiddle, see it here.

I do recommend you google :first-of-type, or :nth-child, or pseudo-selectors in general. While not universally implemented (I think), they are very powerful.

4

That has nothing to do with what I asked about in this thread. Read it again.

I’m talking about the YouTube video itself.

It should be:
width: 600
height:338

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

5

I reread your thread. That, too, is pretty easily done. You’re using the document.querySelector() in your loadPlayer(), which loads the first instance of the found selector. Do the same thing, then set the styles:

let firstPlayerOptions = {
  start: 900,
  end: 1200,
  width: 600,
  height: 338
}
loadPlayer(".jacketc", firstPlayerOptions);
let firstPlayer = document.querySelector(".jacketc");
firstPlayer.style.width = firstPlayerOptions.width;
firstPlayer.style.height = firstPlayerOptions.height;

The selector limits you to the first instance. You can then override the styles as you see fit.

EDIT: I see your problem. When the player beings playing, the size is reset. Hang on, working on that.

7

Okay, so all fixed. I made a few changes, and it works. The problem is, there were two distinct problems, and one was hiding the other.

First thing, remove the iframe CSS lines. That is being done by your YT API include, get rid of it.

Second thing, you never actually set the width and height on the players themselves. You set width and height in your custom playerVars, which is great, but then when you start a player, you have hard-coded values and completely ignore the custom attributes.

Instead, I moved the width and height attributes into the defaultPlayer object, so when you merge that using Object.assign(...), those are being overridden with the custom settings. Then, when you create a new player, use the player’s values:

    players.push(new YT.Player(video, {
      videoId: videoId,
      width: playerVars.width,      // this is coming from the custom settings.
      height: playerVars.height,   //    ... as is this.
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    }))

See it working here: https://jsfiddle.net/hzyrfkwb/441/

1 Like
8

Thank you for your help with this.

9

Did the changes make sense? I mean, do you get why I did what I did?

1 Like
11

Looks pretty good! Glad I made sense. In my head, it sounded right. But in my own head, I’m pretty darned impressive, so…

13

they don’t “belong” in the playerVars, as it is passed to YouTube – but you’ve created the playerVars object containing everything. I could have created that as a separate meta-playerVars thing, I suppose, containing just the width and height, as they DO belong in the top-level object being passed to youTube – it is straight out of their API. I guess you could create the object, then use object deconstruction to pull those out into their own variables, but it would be overkill, given that your code works.

15

Have you gone through the FCC curriculum? https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects/

Here’s a fiddle doing what you want: it takes width and height out, and creates another object with everything else: https://jsfiddle.net/snowMonkey/pbjsLqwg/1/

18

I think it works, looks ok. Really, another way to do much the same thing.