使 YouTube 嵌入(播放列表)加载速度更快
Make YouTube embed (Playlist) load faster
我想使用代码使我的网站加载 YouTube 嵌入更快。该代码显示 YouTube 视频的缩略图,只有当您单击缩略图时,视频播放器才会加载。这很方便,因为 YouTube 嵌入很大并且会减慢您的页面速度。这样您就可以只在真正要观看视频时才加载视频播放器。
我想使用代码嵌入 YouTube 播放列表而不是单个视频。但我遇到的问题是,我找不到自动显示播放列表最后一个缩略图的方法。所以最后添加到播放列表的视频的缩略图。当您单击(默认)缩略图时,我确实设法显示了播放列表,所以这不再是问题了。
有人对如何显示最新缩略图有什么建议吗?
非常感谢。
这是代码:https://codepen.io/DeanAmsterdam/pen/pozWxjW
-我将第 1 行 HTML 从 youtube 视频 ID 更改为播放列表 ID。
-我更改了 JS 第 23 行,从“https://www.youtube.com/embed/ID?autoplay=1"; TO "https://www.youtube.com/embed/videoseries?list=ID”;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/videoseries?list=ID";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
我还发现了第二段代码做同样的事情,我在 HTML 第 1 行和 JS 第 21 行进行了更改。更改与其他代码相同:https://codepen.io/DeanAmsterdam/pen/gOYoLLY
本人只是一个普通的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>
我想使用代码使我的网站加载 YouTube 嵌入更快。该代码显示 YouTube 视频的缩略图,只有当您单击缩略图时,视频播放器才会加载。这很方便,因为 YouTube 嵌入很大并且会减慢您的页面速度。这样您就可以只在真正要观看视频时才加载视频播放器。
我想使用代码嵌入 YouTube 播放列表而不是单个视频。但我遇到的问题是,我找不到自动显示播放列表最后一个缩略图的方法。所以最后添加到播放列表的视频的缩略图。当您单击(默认)缩略图时,我确实设法显示了播放列表,所以这不再是问题了。
有人对如何显示最新缩略图有什么建议吗?
非常感谢。
这是代码:https://codepen.io/DeanAmsterdam/pen/pozWxjW -我将第 1 行 HTML 从 youtube 视频 ID 更改为播放列表 ID。 -我更改了 JS 第 23 行,从“https://www.youtube.com/embed/ID?autoplay=1"; TO "https://www.youtube.com/embed/videoseries?list=ID”;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/videoseries?list=ID";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
我还发现了第二段代码做同样的事情,我在 HTML 第 1 行和 JS 第 21 行进行了更改。更改与其他代码相同:https://codepen.io/DeanAmsterdam/pen/gOYoLLY
本人只是一个普通的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>