एकाधिक एम्बेडेड यूट्यूब वीडियो लोड करते समय बेहतर पेज लोड प्रदर्शन?

Question

मेरे पास एक पृष्ठ है जो एकाधिक (आमतौर पर 10) एम्बेडेड वीडियो प्रदर्शित करता है। वीडियो यूट्यूब के नए IFRAME एम्बेड कोड का उपयोग करते हैं और स्पष्ट रूप से प्रत्येक IFRAME के ​​लिए पृष्ठ लोड करते समय एक अलग अनुरोध होता है। शेष पृष्ठ लोड होने के बाद वीडियो लोड करने का कोई तरीका है, इसलिए वे पेज लोडिंग को धीमा नहीं करते हैं?

Answer 1

ठीक है, मैं एक जावास्क्रिप्ट thingy ("LYTE" कहा जाता है) है कि एक "डमी खिलाड़ी" (जो दिखता है & किसी सामान्य YouTube एम्बेड की तरह लगता है) एक विशिष्ट वर्ग ("Lyte") और आईडी के साथ हर div के लिए पैदा करेगा लिखा था यूट्यूब-आईडी के साथ। केवल "डमी" प्लेयर पर क्लिक करते समय, वास्तविक 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 वास्तविक जावास्क्रिप्ट है ... चीज़)। इस समाधान बाहर

Answer 2

की जांच: Load the YouTube Video Player On-Demand

असल में, यह जब कुछ थंबनेल क्लिक jQuery के साथ अपने यूट्यूब वीडियो आइफ्रेम खिलाड़ी कोड की जगह की तरह है।

Answer 3

स्वचालित, को कम करने का अनुरोध समाधान

WordPress प्लग इन प्रपत्र

यहाँ में एक वर्डप्रेस प्लगइन डाउनलोड करने और मैन्युअल रूप से वर्डप्रेस प्लगइन भंडार के माध्यम से स्थापित कर सकते हैं। मैंने आज इस स्थिति को संभालने के लिए इसे बनाया है। सामग्री में कोई बदलाव की आवश्यकता नहीं है, यह स्वचालित रूप से किसी भी और सभी iframes पर सक्रिय हो जाने पर काम करता है।

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

Answer 4

यह एक jsfiddle demo है।

एचटीएमएल

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

जावास्क्रिप्ट

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

सीएसएस

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