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

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

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

Из исходного iframe потребуется только ID (в примере ниже — hr8DOsAdtqQ)

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

Чтобы видео автоматически воспроизводилось:

youtube[i].addEventListener( "click", function() {
	var iframe = document.createElement( "iframe" );
	iframe.setAttribute( "frameborder", "0" );
	iframe.setAttribute( "allowfullscreen", "" );
	iframe.setAttribute( "allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" );
	iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?autoplay=1" );
	this.innerHTML = "";
	this.appendChild( iframe );
} );

Если нужно с параметрами lazyload для изображений:

//image.src = source;
image.classList.add('lazy');
image.setAttribute("data-src", source);

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() {<br>
    var vimeo = document.querySelectorAll( ".vimeo" );<br>
    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

Немного проще код, но предварительные изображения нужно подставлять вручную

<div class="YoutubeBlock" id="oxLxzXTTaM0"><img src="https://img.youtube.com/vi/oxLxzXTTaM0/sddefault.jpg"></div>

.YoutubeBlock {cursor: pointer;}
.YoutubeBlock img {width: 100%;	height: 315px; object-fit: cover;}	

$(document).ready(function() {
	$(".YoutubeBlock").click(function() {
		var ID = $(this).attr("id");
		$("#"+ID).html('<iframe width="100%" height="315" src="https://www.youtube.com/embed/'+ID+'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
    });
});

Отложенная загрузка <video>

Вёрстка

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

Атрибут poster нужен для превью, пока не загружено видео.

Скрипт

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

[site-socialshare]