css 延迟加载嵌入式YouTube视频

Posted 2021-05-13

# Lazy Load Embedded Youtube Videos
Based on [How to "Lazy Load" Embedded YouTube Videos](https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743) by `Thoriq Firdaus` and modified to just replace all Youtube `iframes`.

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

.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;
}