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

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

15
embedding performance youtube

4 ответов

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

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

11

проверьте это решение: загрузите Видеоплеер YouTube по требованию

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

6

Это 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>
2

автоматический, уменьшение запроса, решение

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

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

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

0