I added to opts:
And is that it?
Is there anything else that needs to be done to it?
https://jsfiddle.net/g6oaht8f/134/
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
js: _load("script")
};
}());
(function manageCover() {
"use strict";
const hide = (el) => el.classList.add("hide");
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
function onPlayerStateChange(event) {
const player = event.target;
if (event.data === YT.PlayerState.PLAYING) {
const otherVideos = (video) => video !== player;
const pauseVideo = (video) => video.pauseVideo();
players.filter(otherVideos).forEach(pauseVideo);
}
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, settings) {
players.push(new YT.Player(video, Object.assign({
videoId: video.dataset.id,
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings)));
}
function init(video, settings) {
load.js("https://www.youtube.com/player_api").then(function() {
YT.ready(function() {
addVideo(video, settings);
});
});
}
return {
init
};
}());
function loadPlayer(opts) {
"use strict";
const show = (el) => el.classList.remove("hide");
function initPlayer(wrapper) {
const video = wrapper.querySelector(".video");
opts.width = opts.width || 198;
opts.height = opts.height || 198;
opts.autoplay = 1;
opts.controls = 1;
opts.rel = 0;
opts.iv_load_policy = 3;
opts.cc_load_policy = 0;
opts.fs = 0;
opts.disablekb = 1;
opts.playerVars = opts;
videoPlayer.init(video, opts);
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(opts.target);
cover.addEventListener("click", coverClickHandler);
}
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
start: 200,
end: 205,
loop: true
});
loadPlayer({
target: ".alpha",
start: 0,
end: 280,
loop: true
});
loadPlayer({
target: ".beta",
start: 0,
end: 240,
loop: true
});
loadPlayer({
target: ".gamma",
start: 0,
end: 222,
loop: true
});
loadPlayer({
target: ".delta",
start: 4,
end: 254,
loop: true
});
loadPlayer({
target: ".epsilon",
start: 0,
end: 150,
loop: true
});
loadPlayer({
target: ".zeta",
start: 0,
end: 285,
loop: true
});
loadPlayer({
target: ".eta",
start: 23,
end: 312,
loop: true
});
loadPlayer({
target: ".theta",
start: 12
});
loadPlayer({
target: ".iota",
start: 1,
end: 50
});
