Лучше ли загружать страницу при загрузке нескольких встроенных видео на Youtube? - PullRequest
Новая
       27

Лучше ли загружать страницу при загрузке нескольких встроенных видео на Youtube?

15 голосов
/ 29 сентября 2011

У меня есть страница, которая отображает несколько (обычно 10) встроенных видео. В видео используется новый код вставки IFRAME для YouTube, и, очевидно, для каждого IFRAME существует отдельный запрос при загрузке страницы. Есть ли способ отложить загрузку видео после загрузки остальной части страницы, чтобы они не сильно замедляли загрузку страницы?

Ответы [ 4 ]

11 голосов
/ 29 сентября 2011

Ну, я написал javascript thingy (называемый "LYTE"), который создаст "фиктивный проигрыватель" (который выглядит и выглядит как обычное встраивание YouTube) для каждого div с определенным классом ("lyte") и id сYouTube-идентификатор.Только при щелчке по «фиктивному» плееру загружается реальный iframe YouTube, который действительно оказывает существенное влияние на производительность страниц, на которых размещены видео YouTube.Вы можете увидеть это в действии в моем блоге .

LYTE в настоящее время не доступен в отдельности, только как часть WP-YouTube-Lyte, плагина WordPress, который я написал , но с минимальными изменениями вы сможете извлечь весь соответствующий код из плагина.

В основном вам нужно создать что-то подобное в вашем 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 на встроенныйигрок при нажатии.

Вы можете найти плагин здесь и посмотреть код здесь (wp-youtube-lyte.php создает div, lyte / lyte.JS является фактическим Javascript ... вещь)

6 голосов
/ 19 ноября 2014

Проверьте это решение: Загрузите YouTube Video Player On-Demand

По сути, это похоже на замену кодов проигрывателя видео iframe на YouTube на jQuery при нажатии на несколько миниатюр.

3 голосов
/ 22 июня 2016

Это 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>
0 голосов
/ 25 декабря 2014

Автоматически, сокращение запросов, решение

В форме плагина WordPress

Вот плагин WordPress, который можно загрузить и установить вручную черезХранилище плагинов WordPress.Я создал это сегодня, чтобы справиться с этой ситуацией.Никаких изменений в содержании не требуется, это работает автоматически после активации любого и всех фреймов.

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

...