Что я хочу сделать, так это снять крышку и показать видео вместо этого.Как я смогу это сделать?Кажется, я не могу понять.
Все, что я хочу сделать, это снять крышку с кода и показать видео.
Рабочий код:
https://jsfiddle.net/sx87fa65/23/
После того, как я удалю обложку из кода, видео не появится.
Как я могу заставить видео появляться без обложки наэто?
Я хочу, чтобы он загружался на экран без крышки.
Javascript
const load = (function() {
"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";
function onPlayerReady(event) {
const player = event.target;
player.setVolume(0); // percent
}
function onPlayerStateChange(event) {
const player = event.target;
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video) {
new YT.Player(video, {
videoId: video.dataset.id,
width: 606,
height: 344,
playerVars: {
autoplay: 1,
controls: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
loop: true,
start: 200,
end: 204
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
function init(opts) {
load.js("https://www.youtube.com/player_api").then(function() {
YT.ready(function() {
addVideo(opts.video);
});
});
}
return {
init
};
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function initPlayer(wrapper) {
videoPlayer.init({
video: wrapper.querySelector(".video")
});
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());