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

Ответ 1

Ну, я написал javascript thingy (называемый "LYTE" ), который создаст "фиктивный плеер" (который выглядит и похож на обычную встраивание YouTube) для каждого div с определенным классом ( "lyte" ) и id с идентификатор YouTube. Только при нажатии на проигрыватель "dummy" загружается фактический YouTube iframe, и это действительно влияет на производительность страниц, встраивающих видео 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 всеми графическими элементами фиктивного игрока (изображение, кнопку воспроизведения, панель управления, заголовок) и добавит eventlistener в div, который вызовет замену из div с реальным встроенным проигрывателем при нажатии.

Вы можете найти плагин здесь и посмотреть код здесь (wp-youtube-lyte.php создает div, lyte/lyte.js - это фактический javascript... thingy).

Ответ 2

Посмотрите это решение: Загрузите видеопроигрыватель YouTube по запросу

В принципе, это похоже на замену ваших видеофрагментов iframe на YouTube с помощью jQuery при нажатии нескольких миниатюр.

Ответ 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>

Ответ 4

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

В плагине WordPress

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

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