We’ll take a pause with the javascript for the spinner because I think I may have an idea that will require only css to do this.
I just did it.
Seen Here: https://jsfiddle.net/2j6kraft/
There was something else I was trying to figure out how to do.
I was trying to add the array to the bottom of the code.
This part:
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
Working code: https://jsfiddle.net/5uh980dk/
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer, config.playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100); // percent
shufflePlaylist(player);
}
function addPlayer(video, playlist) {
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
config.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
playlist,
rel: 0
};
config.events = {
"onReady": onPlayerReady
};
player = new YT.Player(video, config);
}
function play() {
player.playVideo();
}
function init(videos) {
config.playlist = videos.join();
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
}
return {
addPlayer,
init,
play
};
}());
(function initCover() {
function coverClickHandler() {
videoPlayer.play();
}
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
}());
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
Following how it was done in the above code.
I got up to here, where I got stuck: https://jsfiddle.net/x4qs50wz/
Having trouble figuring out how to add:
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
To the bottom.
const videoPlayer = (function makeVideoPlayer() {
const config = {};
const events = {};
const eventHandlers = {};
let player = null;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer, config.playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
const iframe = player.h;
iframe.dispatchEvent(events.afterPlayerReady);
}
function addPlayer(video, playlist) {
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
config.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
playlist,
rel: 0
};
config.events = {
"onReady": onPlayerReady
};
player = new YT.Player(video, config);
const iframe = player.h;
const eventHandler = eventHandlers.afterPlayerReady;
iframe.addEventListener("afterPlayerReady", eventHandler);
}
function play() {
player.playVideo();
}
function addEvents(handlers) {
eventHandlers.afterPlayerReady = handlers.afterPlayerReady;
events.afterPlayerReady = new Event("afterPlayerReady");
}
function init(initEventHandlers, videos) {
addEvents(initEventHandlers);
config.playlist = videos.join();
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
}
return {
addPlayer,
init,
play
};
}());
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
The first code uses this:
(function initCover() {
function coverClickHandler() {
videoPlayer.play();
}
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
}());
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
And the other code uses this:
This is the piece I’m having trouble figuring out how to add the array to.
I’m confused about how the array would get added to this.
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
This does not work like this:
videoPlayer.init({
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
There is this error:
Uncaught TypeError: Cannot read properties of undefined (reading ‘join’)"
But that is because the code is missing:
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
}());
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
Because I don’t know how to add them to here:
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
I don’t know how to combine: this
(function initCover() {
function coverClickHandler() {
videoPlayer.play();
}
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
}());
videoPlayer.init([
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"CHahce95B1g",
"2VwsvrPFr9w"
]);
With this:
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
I’m confused.
