javascript - 努力按需加载 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>标签，主题会为你做到这一点。