努力按需加载 Youtube 播放器而不是传统的嵌入

Question

我正在尝试加快我网站的加载时间。我有一个嵌入了传统 IFRAME 的 Youtube 视频。我找到了这篇文章，但它似乎对我不起作用。我一定是做错了什么，

http://www.labnol.org/internet/light-youtube-embeds/27941/

我将 JS 和 CSS 正确添加到我的网站（我的 wordpress 主题有一个内置区域供我粘贴）。我将 HTML 添加到我希望视频出现的容器中，并按照说明更改了 VIDEO-ID。现在应该是视频的空白区域，但是当您将鼠标悬停在它上面时，您可以看到它是根据您的光标链接的。当你点击它时，什么也没有发生。

我正在这个页面上测试它...视频应该出现在该男子图片右侧的上折中：

https://www.yogabearpc.com/laptop-repair/

如果有人能解决这个问题，我将不胜感激

Answer 1

你的 javascript 写得不好。你有 2 个<script> 标签：

<script id="mfn-dnmc-custom-js" type="text/rocketscript">
//<![CDATA[
<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
[...]
</script>
//]]>
</script>

当您将自定义 javascript 输入到“特殊内置区域”时，您无需添加 <script> 和 </script> 标签，主题会为您完成。