嵌入 youtube 视频时性能下降 + 反向工程一个正确的网站
Performance drop when embedding youtube videos + reverse engineering a site that does it right
在 HTML + vanilla JS 页面中嵌入 YouTube 视频时，由于所有视频都已预加载，我们的性能会大幅下降。 (videoplayback?expire=..... 请求)
我发现 vodafone 的工作着陆页有两个视频，他们懒加载它们。我真的很喜欢这个结果：
- 您可以直接与视频互动（例如分享以供稍后按钮）
- 加载期间有 0 个请求
- 点击视频播放流畅
您可以在这里查看：https://careers.vodafone.com/
我看到了很多使用 css 插件进行延迟加载的方法...但是我没有找到像 vodafone 的解决方案一样干净的解决方案。
页面加载时所有视频都没有迹象：
有人知道他们是怎么做到的吗？是插件吗？
据我所知，Vondafone 在这里没有做任何特别的事情，只是指向嵌入页面的常规 iframe。
<iframe src="//www.youtube.com/embed/9cC0CZiVpsA?rel=0&autoplay=0" allowfullscreen="true"></iframe>
对 YouTube 的第一个请求发生在 DOMContentLoaded 事件之前（图中的蓝色条）并且在页面完全加载之前（红色条）。预览图像加载在两个栏之间。
但是，对 videoplayback 的请求只有在您点击其中一个视频后才会开始。可能是您向视频 url 添加了 ;autoplay=1 或向 iframe 添加了 autoplay 属性？
在 HTML + vanilla JS 页面中嵌入 YouTube 视频时，由于所有视频都已预加载，我们的性能会大幅下降。 (videoplayback?expire=..... 请求)
我发现 vodafone 的工作着陆页有两个视频，他们懒加载它们。我真的很喜欢这个结果：
- 您可以直接与视频互动（例如分享以供稍后按钮）
- 加载期间有 0 个请求
- 点击视频播放流畅
您可以在这里查看：https://careers.vodafone.com/
我看到了很多使用 css 插件进行延迟加载的方法...但是我没有找到像 vodafone 的解决方案一样干净的解决方案。
页面加载时所有视频都没有迹象：
有人知道他们是怎么做到的吗？是插件吗？
据我所知，Vondafone 在这里没有做任何特别的事情，只是指向嵌入页面的常规 iframe。
<iframe src="//www.youtube.com/embed/9cC0CZiVpsA?rel=0&autoplay=0" allowfullscreen="true"></iframe>
对 YouTube 的第一个请求发生在 DOMContentLoaded 事件之前（图中的蓝色条）并且在页面完全加载之前（红色条）。预览图像加载在两个栏之间。
但是，对 videoplayback 的请求只有在您点击其中一个视频后才会开始。可能是您向视频 url 添加了 ;autoplay=1 或向 iframe 添加了 autoplay 属性？