我试图创建一个延迟加载的嵌入式 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%; …