Lazy Load Embedded YouTube Videos

readme.md

Lazy Load Embedded Youtube Videos

Based on How to "Lazy Load" Embedded YouTube Videos by Thoriq Firdaus and modified to just replace all Youtube iframes.

lazy-load-embedded-youtube-video.css

.youtube {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.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;
}

lazy-load-embedded-youtube-video.js

(function() {
  let iframes = [].slice.call(document.getElementsByTagName('iframe'));
  let youtube = iframes.filter(function(el){
    return el.src.indexOf('youtube.com/embed') !== -1;
  });

  youtube.forEach(function(el) {
    let div = document.createElement('div');
    div.setAttribute('class', 'youtube');
    let playButton = document.createElement('div');
    playButton.setAttribute('class', 'play-button');
    div.appendChild(playButton);

    let image = new Image();
    let id = el.src.match(/embed\/(.*)$/).slice(-1).pop();
    if(!id) { return; }
    image.src = 'https://i.ytimg.com/vi/' + id + '/sddefault.jpg';
    image.addEventListener('load', function() {
      div.appendChild(image);
    }.bind(this, div));

    div.addEventListener('click', function() {
      let iframe = document.createElement('iframe');
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('allowfullscreen', 'allowfullscreen');
        iframe.setAttribute('src', 'https://www.youtube.com/embed/' + id + '?rel=0&showinfo=0&autoplay=1');
        this.innerHTML = '';
        this.appendChild(iframe);
    });
    el.parentNode.appendChild(div);
    el.parentNode.removeChild(el);
  });
})();