如何“延迟加载”嵌入式YouTube视频

在本教程中，我将说明如何“延迟加载”多个嵌入式YouTube视频。 这样做将改善我们初始页面加载的性能，并将一些功能移交给用户。

延迟加载

嵌入YouTube视频对于任何与网络相关的人来说已经成为完全正常的过程。 复制，粘贴，完成。 但是，引入诸如YouTube视频之类的外部资源可能会降低网页的加载性能，尤其是在同一页面上嵌入两个或更多视频的情况下。

通过嵌入视频，我们不仅需要视频文件，还可以请求更多内容。 获取了许多资源，包括JavaScript文件，样式表，图像和广告。 从下面的屏幕截图中可以看到，两个Youtube视频相当于22个HTTP请求，总共下载了624kb。 随着我们在页面上嵌入更多视频，这些数字将不断攀升。

因此，我们不会在页面加载后立即加载Youtube视频，而是会在用户要求时播放视频。 此方法通常称为延迟加载 -它将在初始页面加载时最小化HTTP请求，并最终提高页面的性能。

事不宜迟，让我们开始吧。

1. HTML结构

我们从构建HTML开始。 这是直截了当的； 我们只使用了两个div元素。 第一个div将环绕嵌入的Youtube视频，第二个div嵌套在第一个div ，我们将使用它来塑造“ 播放”按钮，以说明这是可播放的视频。

<!-- (1) video wrapper -->
<div class="youtube" data-embed="AqcjdkPMPJA"> 

    <!-- (2) the "play" button -->
	<div class="play-button"></div> 
    
</div>

从上面的代码片段中可以看到，我们在这些div元素中添加了一个class ，并在第一个div添加了data-属性，以指定要嵌入的YouTube视频的ID。

2. CSS

接下来，我们添加样式：