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

目前，如果我通过iframe代码将一些视频放进一个网站，并使用自动播放模式，我在谷歌页面Speed Insights上的得分总是很低。我发现只有一种方法可以避免这个问题。延迟4秒后加载视频是延迟的。然而，所描述的方法不利于用户体验。

---

有人知道更合适的方法来解决这个问题吗？

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

下面的方法只是如何做到这一点的一个例子，在制作过程中，最好使用YouTube API正确加载它，这样视频就可以点击播放，而不必点击两次，（他们使用iFrame嵌入禁用了声音视频的自动播放）但它应该给你一个很好的起点，因为你的问题只是如何绕过这个问题

请注意，由于堆栈溢出的限制，下面的视频无法播放，下面是一个与下面代码完全相同的示例

（函数（）{
var youtube=document.querySelectorAll（“.youtube”）；
对于（var i=0；i
html{
背景色：#F3；
}
.包装纸{
最大宽度：680px；
保证金：60像素自动；
填充：0 20px；
}
.youtube{
背景色：#000；
边缘底部：30px；
位置：相对位置；
垫面：56.25%；
溢出：隐藏；
光标：指针；
}
.youtube img{
宽度：100%；
前-16.82%；
左：0；
不透明度：0.7；
}
.youtube.播放按钮{
宽度：90px；
高度：60px；
背景色：#333；
盒影：0.30pxRGBA（0,0,0,0.6）；
z指数：1；
不透明度：0.8；
边界半径：6px；
}
.youtube.播放按钮：之前{
内容：“；
边框样式：实心；
边框宽度：15px 0 15px 26.0px；
边框颜色：透明#fff；
}
.youtube img，
.youtube.播放按钮{
光标：指针；
}
.youtube img，
.youtube iframe，
.youtube.播放按钮，
.youtube.播放按钮：之前{
位置：绝对位置；
}
.youtube.播放按钮，
.youtube.播放按钮：之前{
最高：50%；
左：50%；
转换：translate3d（-50%，-50%，0）；
}
.youtube iframe{
身高：100%；
宽度：100%；
排名：0；
左：0；
}
最好的方法是显示图像（理想情况下是缩略图，但没有理由不能显示不同的图像），并在单击图像时加载视频和所有相关的JS

下面的方法只是如何做到这一点的一个例子，在制作过程中，最好使用YouTube API正确加载它，这样视频就可以点击播放，而不必点击两次，（他们使用iFrame嵌入禁用了声音视频的自动播放）但它应该给你一个很好的起点，因为你的问题只是如何绕过这个问题

请注意，由于堆栈溢出的限制，下面的视频无法播放，下面是一个与下面代码完全相同的示例


（函数（）{
var youtube=document.querySelectorAll（“.youtube”）；
对于（var i=0；i
html{
背景色：#F3；
}
.包装纸{
最大宽度：680px；
保证金：60像素自动；
填充：0 20px；
}
.youtube{
背景色：#000；
边缘底部：30px；
位置：相对位置；
垫面：56.25%；
溢出：隐藏；
光标：指针；
}
.youtube img{
宽度：100%；
前-16.82%；
左：0；
不透明度：0.7；
}
.youtube.播放按钮{
宽度：90px；
高度：60px；
背景色：#333；
盒影：0.30pxRGBA（0,0,0,0.6）；
z指数：1；
不透明度：0.8；
边界半径：6px；
}
.youtube.播放按钮：之前{
内容：“；
边框样式：实心；
边框宽度：15px 0 15px 26.0px；
边框颜色：透明#fff；
}
.youtube img，
.youtube.播放按钮{
光标：指针；
}
.youtube img，
.youtube iframe，
.youtube.播放按钮，
.youtube.播放按钮：之前{
位置：绝对位置；
}
.youtube.播放按钮，
.youtube.播放按钮：之前{
最高：50%；
左：50%；
转换：translate3d（-50%，-50%，0）；
}
.youtube iframe{
身高：100%；
宽度：100%；
排名：0；
左：0；
}

很乐意做这项工作。该插件不仅对图像应用延迟加载，还嵌入视频和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>


var lazyLoadInstance=new LazyLoad（）；
很乐意做这项工作。该插件不仅对图像应用延迟加载，而且