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