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添加一个eventlistener，触发替换单击时真实嵌入式播放器的div。

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

Answer 2

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

基本上，就像点击一些缩略图时用jQuery替换你的YouTube视频iframe播放器代码一样。

Answer 3

这是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>

Answer 4

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

在WordPress插件表格中

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

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

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

4 个答案: