To loop 1 video, how do you do that in the code?
Can that be done with a single video?
I tried loop:1
, and loop: true
, those didn’t work.
In order to use loop, does it have to be a playlist?
(function manageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const video = cover.parentElement.querySelector(".wrap");
show(video);
}
const cover = document.querySelector(".jacket");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
let player = null;
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 onPlayerReady(event) {
player = event.target;
player.setVolume(100); // percent
}
function addPlayer(video) {
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: video.dataset.id,
width: 640
};
config.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
config.events = {
"onReady": onPlayerReady
};
player = new YT.Player(video, config);
}
function play() {
player.playVideo();
}
return {
addPlayer,
play
};
}());
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".jacket");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
(function initCover() {
function coverClickHandler() {
videoPlayer.play();
}
const cover = document.querySelector(".jacket");
cover.addEventListener("click", coverClickHandler);
}());