延迟加载嵌入式 YouTube 视频

我正在开发一个简单的静态网站，应该在着陆页上直接显示一个 YouTube 视频。于是，我兴高采烈地跳到 YouTube 上，抓取了嵌入代码，粘贴到编辑器里，然后就完工了。

事实是，这项工作专门用于提供高性能、可访问性和现代实践，所以你可以想象当我注意到只是为了拥有它而<iframe>得到这个时的恼怒：

另外还有一些我的广告拦截器为我处理的额外请求。

也就是说，无论我的用户是否观看视频，他们都必须下载超过 500KB 的文件到网站上。你知道这会给你的用户带来多大的负担吗，尤其是那些网速慢或电脑性能低的用户？更糟糕的是，他们还会因为加载了一个他们根本不知道的视频而被追踪——嗨，谷歌！

由于它是一个简单的静态网站，因此我想将解决方案保持在最低限度，所以这就是我想出的方案。

截至 2019 年 8 月，嵌入 YouTube 视频的代码如下：

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

所以我想，如果我不显示视频本身，只显示链接到视频的封面会怎么样？它看起来仍然有点像嵌入式视频，但只需要预先显示一张图片。还好 YouTube 有一个视频缩略图的 URL 结构。

<a href="https://www.youtube.com/embed/Y8Wp3dafaMQ">
  <img src="https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg">
</a>

很酷，但我真的不想为了这么一小段代码就创建一个全新的页面。好在我们运气好，<iframe>正好有个对我们来说完美的东西—— srcdoc 属性<iframe>。有了它，你就可以直接在托管页面中引用。不过要注意，它在 Edge 或 IE 上不起作用，而且我们不能使用双引号。

<iframe 
  ...
  srcdoc="<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ><img src=https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg></a>">
</iframe>

最后，你会注意到，点击图片后，视频会加载，但处于暂停状态，需要再次点击才能开始观看。不用担心，因为嵌入的视频 URL 支持播放器参数，其中有一个autoplay变量的作用正如你所期望的那样。此外，由于浏览器的默认样式，在支持滚动条的系统（即非 macOS）上，用户会看到一个不必要的滚动条，但只需稍微重置一下 CSS 即可解决。

Remy Sharp指出，我们应该保留srcas 的后备选项，以便浏览器不支持srcdoc。Adrian Roselli建议进行一些调整以提高可访问性。此外，在应用这些建议的同时，我修复了图像位置，使其在水平和垂直方向上都保持居中，而无需使用background-size: cover。感谢大家的反馈！🤩️

最终结果如下：

特别<iframe>指出：

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>

这样，用户只需预先下载封面图片，这对我来说非常合理。您可以进一步自定义，例如，针对不同设备使用不同的缩略图大小。如果您需要更好地控制用户加载的内容以及启用哪些功能，您可以随时探索YouTube 播放器 API。

如果您有任何疑问、更正或建议，请随时在下方评论。感谢您的时间。😊️

文章来源：https://dev.to/haggen/lazy-load-embedded-youtube-videos-520g