加載多個嵌入式Youtube視頻時，頁面加載性能更好嗎？

Question

我有一個顯示多個（通常是10個）嵌入式視頻的頁面。這些視頻使用youtube的新IFRAME嵌入代碼，顯然，對於每個IFRAME，加載頁面時都會有一個單獨的請求。有沒有辦法延遲加載頁面加載後加載視頻，所以它們不會減慢頁面加載的速度？

Answer 1

那麼，我寫了一個javascript thingy（叫做「LYTE」），它會爲每個具有特定類（「lyte」）和id的div創建一個「虛擬播放器」（看起來&感覺像一個普通的YouTube嵌入）與YouTube的身份證。只有當點擊「虛擬」播放器時，纔會加載實際的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

基本上，它就像點擊一些縮略圖時使用jQuery更換您的YouTube視頻播放器的iframe代碼。

Answer 3

自動，要求降低，解決

在WordPress插件形式

這裏是一個WordPress插件，您可以手動下載和通過WordPress插件庫安裝。我今天創建這個只是爲了處理這種情況。不需要對內容進行任何更改，只要在任何和所有內聯框架上激活，就會自動運行。

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>