将 youtube 视频放入网站并从 Google Page Speed Insight 获得高分的最佳方式答案

【问题标题】：The best way to put a youtube video into a website and get a good score from Google Page Speed Insight将 youtube 视频放入网站并从 Google Page Speed Insight 获得高分的最佳方式
【发布时间】：2020-06-13 13:10:15
【问题描述】：

目前，如果我通过 iframe 代码将一些视频放入网站并使用自动播放模式，我在 Google Pages Speed Insights 上的得分总是很差。我发现只有一种方法可以避免这个问题。延迟 4 秒后延迟加载视频。然而，所描述的方法不利于用户体验。有人知道更合适的方法来解决这个问题吗？

【问题讨论】：

欺骗stackoverflow.com/questions/50410828/…

标签： youtube google-pagespeed

【解决方案1】：

最好的方法是显示图像（理想情况下是缩略图，但没有理由不能显示不同的图像）并在单击图像时加载视频和所有相关的 JS。

以下方法只是如何执行此操作的示例，在生产中，最好使用 YouTube API 正确加载它，这样视频就会在点击时播放，而不必点击两次，（他们禁用了视频的自动播放使用 iFrame 嵌入的声音），但它应该给你一个很好的起点，因为你的问题只是如何解决这个问题！

请注意，由于 Stack Overflow 的限制，以下视频将无法播放，这里是 jsFiddle here that works.，代码与以下完全相同。

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

html {
	background-color: #f3f3f3;
}
.wrapper {
	max-width: 680px;
	margin: 60px auto;
	padding: 0 20px;
}

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

<div class="wrapper">
	<div class="youtube" data-embed="U9t-slLl30E">
		<div class="play-button"></div>
	</div>
</div>

【讨论】：

【解决方案2】：

LazyLoad 很友好地完成了这项工作。该插件不仅适用于图像的延迟加载，还适用于嵌入视频和 iframe。只需设置它并将“lazy”作为一个类应用到 YouTube iframe。

这是一个简单的例子：

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>
<script>var lazyLoadInstance = new LazyLoad();</script>
<iframe class="lazy" height="300" width="500" data-src="https://www.youtube.com/embed/YoutubeCode"></iframe>

【讨论】：