加载多个嵌入式 Youtube 视频时页面加载性能更好？

Question

我有一个显示多个（通常是 10 个）嵌入视频的页面。这些视频使用 youtube 的新 IFRAME 嵌入代码，显然对于每个 IFRAME，在加载页面时都有一个单独的请求。有没有办法在加载页面的其余部分后延迟加载视频，这样它们就不会减慢页面加载速度？

Answer 1

好吧，我写了一个 javascript thingy（称为“LYTE”），它将为每个具有特定类（“lyte”）和 id 的 div 创建一个“虚拟播放器”（看起来和感觉就像一个普通的 YouTube 嵌入） YouTube ID。只有在单击“虚拟”播放器时，才会加载实际的 YouTube iframe，它确实对嵌入 YouTube 视频的页面的性能有重要影响。你可以在on my blog看到它。

LYTE 目前还不能真正独立使用，仅作为WP-YouTube-Lyte, the WordPress plugin I wrote 的一部分，但只需进行少量更改，您就可以从插件中提取所有相关代码。

你基本上必须在你的 HTML 中创建这样的东西；

<div class="lyte" id="7nuiOe8M6bw" style="width:640px;height:385px;">
<script type="text/javascript"><!-- 
var nT='newtube-';var bU='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/';
var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert}
function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}}; 
 --></script></div>

此块将加载 lyte-min.js，它将用虚拟播放器的所有图形元素（图像、播放按钮、控制栏、标题）填充 div，并将触发替换的事件监听器添加到 div单击时带有真正嵌入式播放器的 div。

您可以找到插件here 并查看代码here（wp-youtube-lyte.php 创建 div，lyte/lyte.js 是实际的 javascript ... thingy）。

Answer 2

查看此解决方案：Load the YouTube Video Player On-Demand

基本上，这就像在单击某些缩略图时将您的 YouTube 视频 iframe 播放器代码替换为 jQuery。

Answer 3

自动，减少请求，解决方案

在 WordPress 插件形式中

这是一个 WordPress 插件，您可以通过 WordPress 插件存储库下载并手动安装。我今天创建这个只是为了处理这种情况。无需更改内容，一旦在任何和所有 iframe 上激活，它就会自动运行。

https://wordpress.org/plugins/lowermedia-iframes-on-demand/

Answer 4

这是jsfiddle demo。

HTML

<div class="youtube-container">
   <div class="youtube-player" data-id="1y6smkh6c-0"></div>
</div>

Javascript

(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);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

CSS

 <style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { 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; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>