Javascript 使YouTube嵌入（播放列表）加载更快

我想使用代码使我的网站更快地加载YouTube嵌入。该代码显示YouTube视频的缩略图，并且仅当您单击该缩略图时，视频播放器才会加载该缩略图。这很方便，因为YouTube的嵌入量很大，会降低页面速度。这样，当你真的要观看视频时，你才可以加载视频播放器

我想用代码嵌入YouTube播放列表，而不是单个视频。但我的问题是，我无法找到一种方法来自动显示播放列表的最后一个缩略图。因此，上次添加到播放列表的视频的缩略图。当你点击（默认）缩略图时，我确实设法显示了播放列表，这样就没有问题了

有人对如何显示最新的缩略图有什么建议吗

我将非常感激

代码如下： -我将HTML第1行从youtube视频ID更改为播放列表ID。 -我将JS第23行从“”改为“；至“

document.addEventListener（“DOMContentLoaded”，
函数（）{
var div，n，
v=document.getElementsByClassName（“youtube播放器”）；
对于（n=0；n

我还发现了第二段代码，做了同样的事情，我对HTML第1行和JS第21行进行了更改。更改与其他代码上的更改相同：

我只是一个简单的Wordpress用户，所以如果我在解释时有任何错误，请原谅我

---

谢谢。

您可以像这样嵌入它：

Html:

 <div class="youtube-player" data-id="XZ6y84lvGp8" data-related="1" data-control="1" data-info="1" data-fullscreen="1" style="width:100%;display: block; position: relative;cursor: pointer;max-height:1080px;height:100%; overflow:hidden;padding-bottom:56.25%;margin:0 auto"> <img src="//i.ytimg.com/vi/XZ6y84lvGp8/hqdefault.jpg" style="bottom: -100%; display: block; left: 0; margin: auto; max-width: 100%; width: 100%;height:auto; position: absolute; right: 0; top: -100%;"> <div style="height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url('http://i.imgur.com/TxzC70f.png') no-repeat;"></div> </div> 

Javascript:

<script> (function() { var v = document.getElementsByClassName("youtube-player"); for (var n = 0; n < v.length; n++) { v[n].onclick = function () { var iframe = document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&rel="+ this.dataset.related +"&controls="+this.dataset.control+"&showinfo=" + this.dataset.info); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); iframe.setAttribute("style", "width: 100%; height: 100%; position: absolute; top: 0; left: 0;"); if (this.dataset.fullscreen == 1){ iframe.setAttribute("allowfullscreen", ""); } while (this.firstChild) { this.removeChild(this.firstChild); } this.appendChild(iframe); }; } })(); </script>

（function（）{var v=document.getElementsByClassName（“youtube播放器”）；for（var n=0；n

您好，谢谢您的回答，非常感谢您的帮助。但您的解决方案不适用于YouTube播放列表。代码只适用于一个YouTube视频，但我想嵌入一个YouTube播放列表，然后将该播放列表的最新缩略图显示为您必须单击的图像。这是播放列表的一个示例。所以我的问题是，我找不到一种方法来显示播放列表的最后一个缩略图。。。我希望你还有别的建议。祝您有个美好的一天！非常感谢。

<script> (function() { var v = document.getElementsByClassName("youtube-player"); for (var n = 0; n < v.length; n++) { v[n].onclick = function () { var iframe = document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&rel="+ this.dataset.related +"&controls="+this.dataset.control+"&showinfo=" + this.dataset.info); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); iframe.setAttribute("style", "width: 100%; height: 100%; position: absolute; top: 0; left: 0;"); if (this.dataset.fullscreen == 1){ iframe.setAttribute("allowfullscreen", ""); } while (this.firstChild) { this.removeChild(this.firstChild); } this.appendChild(iframe); }; } })(); </script>