我试图创建一个延迟加载的嵌入式YouTube视频,并带有自定义图标作为播放按钮。它已成功创建,甚至在桌面视图中正常工作。在桌面上,当我在视频开始时单击播放按钮时。
但是,当我在移动视图上打开页面并单击播放按钮时,它无法播放,并且在第一次单击后它显示 youtube 默认播放按钮。之后,当我单击Youtube默认播放按钮时,它开始播放视频。
我只想点击一次即可在移动设备上播放视频。请帮助我纠正它,让我知道我在代码中的确切错误。
(function() {
var youtube = document.querySelectorAll(".youtube");
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener("load", function() {
youtube[i].appendChild(image);
}(i));
youtube[i].addEventListener("click", function() {
var iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&controls=0&autoplay=1");
this.innerHTML = "";
this.appendChild(iframe);
});
};
})();
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0, 0, 0, 0.6);
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0);
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<div class="youtube" data-embed="AqcjdkPMPJA">
<!-- (2) the "play" button -->
<div class="play-button"></div>
</div>
我不太确定这个问题的作者是否想要自动播放功能。
值得一提的是,我设法嵌入了一个YouTube视频,你只需要在播放器上点击一次就可以在移动设备上运行视频。在我看来,这是正确嵌入YT的IFrame播放器的问题,以便您可以使用onYouTubeIframeAPIReady
函数。
这里很好地描述了所有内容: 用于 iframe 嵌入的 YouTube 播放器 API 参考
做了一个小提琴,不是循环,但你会明白:JSFiddle<</p>
延迟加载 这意味着移动设备中允许自动播放,而是使用以下媒体查询仅向大型设备添加延迟加载 删除移动设备等小型设备的延迟加载。
if($(window).width() < 767)
{
// change functionality for smaller screens
} else {
// change functionality for larger screens
}
我设法在桌面/移动设备上一键播放视频,其JavaScript与您的JavaScript非常相似,除了添加了onPlayerReady
功能:
function onPlayerReady(event) {
event.target.playVideo();
}
如果你在WordPress上,我已经用它制作了一个YouTube懒惰加载插件。更多信息 + 演示在这里 https://thinksmall.me/
如果您不在WordPress上,请随时打开插件并查看其代码。代码与循环非常接近您的代码。您将看到如何使其与onPlayerReady
函数配合使用。