/ Сайтостроение / Scripts & jquery / Отложенная загрузка видео

Отложенная загрузка видео

25.08.2018

165

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo.

Отложенная загрузка iframe YOUtube

Из исходного iframe потребуется только ID

<iframe width="560" height="415" src="https://www.youtube.com/embed/hr8DOsAdtqQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Который необходимо прописать в специальный атрибут:

<div class="youtube" data-embed="hr8DOsAdtqQ"><div class="play-button"></div></div>

Скрипт, который берет ID и при нажатии на кнопку play подгружает видео

( function() {
    var youtube = document.querySelectorAll( ".youtube" );
    for (var i = 0; i < youtube.length; i++) {
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );
        
                youtube[i].addEventListener( "click", function() {
                    var iframe = document.createElement( "iframe" );
                    iframe.setAttribute( "frameborder", "0" );
                    iframe.setAttribute( "allowfullscreen", "" );
                    iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
                    this.innerHTML = "";
                    this.appendChild( iframe );
                } );    
    };
} )();

CSS нужен для предварительного показа скриншота ролика и вывода кнопки play

/* Lazyload iframe YOUtube */

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.youtube img {width: 100%; top: -16.82%; left: 0; opacity: 0.7;}

.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}

.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}

.youtube img, .youtube .play-button {cursor: pointer;}

.youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before {position: absolute;}

.youtube .play-button, .youtube .play-button:before {top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}

.youtube iframe {height: 100%; width: 100%; top: 0; left: 0;}

Отложенная загрузка iframe Vimeo

С Vimeo немного посложнее, потому что номер в ссылке на превью не совпадает с номер самого видео. В остальном все тоже самое, берем ID видео

<iframe src="https://player.vimeo.com/video/67508707" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

и прописываем его в тот же атрибут:

<div class="youtube" data-embed="67508707"><div class="play-button"></div></div>

Скрипт немного видоизменяем под vimeo

( function() {
var vimeo = document.querySelectorAll( ".vimeo" );
for (var i = 0; i < vimeo.length; i++) { var source = "https://i.vimeocdn.com/video/"; //можно поставить произвольную заглушку var image = new Image(); image.src = source; image.addEventListener( "load", function() { vimeo[ i ].appendChild( image ); }( i ) ); vimeo[i].addEventListener( "click", function() { var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "webkitallowfullscreen", "" ); iframe.setAttribute( "mozallowfullscreen", "" ); iframe.setAttribute( "src", "https://player.vimeo.com/video/"+ this.dataset.embed + "?autoplay=1"); this.innerHTML = ""; this.appendChild( iframe ); } ); }; } )();

Если нужно видео добавить свойства loop и autopause, то после записи ?autoplay=1 нужно добавить &loop=1&autopause=0

Стили CSS абсолютно те же самые, только поменять .youtube на .vimeo

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
	width: 100%;
}

.youtube img {width: 100%; top: -16.82%; left: 0; opacity: 0.7;}

.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}

.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}

.youtube img, .youtube .play-button {cursor: pointer;}

.youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before {position: absolute;}

.youtube .play-button, .youtube .play-button:before {top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}

.youtube iframe {height: 100%; width: 100%; top: 0; left: 0;}
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );

youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
  • Похожие записи
  • Комментарии
  • Вложения
Форматы записей

Форматы записей

Записям в WP можно назначать формат, в зависимости от содержания: aside (заметка), gallery (галерея), link (ссылка), image (изображение), quote (цитата), status (статус), video, chat (чат), audio либо Стандартный (по-умолчанию). Пользовательские Читать далее »

Произвольное поле — Видео

Произвольное поле — Видео

Тип поля Видео В произвольных полях изначально отсутствует тип поля Видео. Его можно добавить небольшим плагином acf-field-video. Просто копируем папку acf-field-video-master в папку plugins и в админке включаем его. Далее Читать далее »

Видео на сайте

Видео на сайте

Знакомимся с различными способами и сервисами (youtube, vimeo и т.д.) добавления видео на страницу сайта. Vimeo <iframe src="https://player.vimeo.com/video/130903027" width="500" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> YOUTUBE <iframe width="500" height="500" src="https://www.youtube.com/embed/BeaW2qq8wAk" frameborder="0" Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Отложенная загрузка видео
Даты создания CMS
Рекомендации для васДаты создания CMSOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.