延迟加载嵌入式 YouTube 视频

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

这是一个来自 Arthur Corenzan 的非常巧妙的想法。与其使用默认的 YouTube 嵌入，这会在页面上添加大量资源（无论用户是否播放视频），不如使用一个小小的占位符网页，它只是一个可以点击并链接到 YouTube 嵌入的图片。

它的行为本质上仍然完全相同：点击，在适当位置播放视频。

这个技巧源于srcdoc，它是<iframe>的一个特性，您可以在其中将整个 HTML 文档的内容放入属性中。它就像内联样式，但更像是内联整个文档的东西。我过去曾在将 MailChimp 创建的电子邮件简报嵌入到此网站时使用过它。我会将电子邮件作为完整的 HTML 文档保存到数据库中，根据需要检索它，然后将其放入带有srcdoc的<iframe>中。

Arthur 感谢 Remy 对使其在 IE 11 中工作进行的调整，并感谢 Adrian 进行的一些无障碍改进。

我也同意那篇文章评论中 Hugh 的观点。现在 Chrome 中已引入 原生延迟加载（请参阅 我们的报道），我们不妨也加上loading="lazy"，因为如果它渲染在视口之外，则意味着根本不会发出任何请求。

我在这里也嵌入一个演示

读者 Tracey Rich 说他们需要使用&#x25BA; 而不是那个 Unicode 播放按钮。

嘘！创建 DigitalOcean 帐户并获得 200 美元的免费额度 用于基于云的托管和服务。

评论

  1. Andy
    评论永久链接#

    正如作者所说，“它在移动设备上不起作用”，而恰恰是在移动设备上，YouTube iframe 的延迟加载会更有用。

    https://dev.to/haggen/comment/ebn3

    • Arthur
      评论永久链接#

      嗨，Andy！我不会说“它在移动设备上不起作用”，因为大部分功能都正常。只是自动播放部分不起作用，用户需要再次点击，因为第一次点击只是加载视频。它仍然可以节省本来会下载的垃圾数据，尤其是在移动设备上，这 500KB 会造成影响。

  2. Timsti
    评论永久链接#

    它仍然加载了…www-embed…/www-embed-player.js 和 en_US/base.js，因为它是一个 iframe。
    此外，如果在一个页面上使用多个视频，iframe 会多次加载这两个文件。如何防止这种情况？使用 div 代替 iframe？

  3. wu egypt
    评论永久链接#

    非常非常酷，我尝试了很多 JavaScript
    但是这段代码很简单，效果很好
    非常感谢，这真的很有帮助

  4. Yrma
    评论永久链接#

    非常感谢，我在我的网站 https://oraciondelamanana3.com 上应用了它，它起作用了，但我注意到视频后立即出现的所有内容都消失了，我不知道为什么会发生这种情况，或者更确切地说，我不知道内容去哪里了。

    在 url 中 -> https://oraciondelamanana3.com 您会看到有一个视频，下面有内容甚至相关条目。

    但是当我将此代码用于视频时，视频后立即所有内容都消失了 -> https://gyazo.com/e025c053fa0c2b4e8eabf0dcce6fb9da

    有没有办法让 YouTube 的延迟加载不会破坏内容？

  5. Philip
    评论永久链接#

    我注意到禁用我的广告拦截器会导致此方法反复抛出控制台错误（每秒多次），直到点击 iframe。

    无法在“DOMWindow”上执行“postMessage”：提供的目标来源（'https://www.youtube.com'）与接收窗口的来源（'https://www.mydomain.com'）不匹配。

    我尝试将 enablejsapi=1 和 origin=https://www.mydomain.com 添加到嵌入 URL，但两者都没有阻止错误。还有其他人遇到这个问题吗？

  6. Jens Martsch - dotnetic
    评论永久链接#

    请查看 https://github.com/paulirish/lite-youtube-embed，这是 Paul Irish 在 Chrome Dev Summit 2019 上刚刚宣布的，它使用自定义元素并且只呈现预览图像。当您点击播放按钮时，会加载脚本和嵌入。

  7. Gijo Varghese
    评论永久链接#

    此方法不再自动播放。需要点击两次才能播放视频（至少在 Chrome 中是这样）。

    • Chris Coyier
      评论永久链接#

      看起来在原始 iframe src 的末尾添加&autoplay=1 可以解决问题。我已经更新了嵌入以包含此内容。

    • Star
      评论永久链接#

      看起来在 Chrome 和 Safari 中再次无法使用 &autoplay=1 或 ?autoplay=1。它在 Firefox 中有效。

  8. Star
    评论永久链接#

    嗯，如果您在 &autoplay=1 中添加 &mute=1，它将在 Chrome + Safari 中有效。但这并不是用户点击播放时预期的行为，因此也很烦人。

  9. JJ
    评论永久链接#

    您需要添加这个…

    iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?modestbranding=1&rel=0&showinfo=0&html5=1&autoplay=1"
  10. Janos
    评论永久链接#

    很酷的技巧！我实现了这个技巧，不同之处在于没有箭头 css；而是悬停时，有一个快速的 js 点击。这意味着预览图像最初会加载，当您悬停时，嵌入会加载，如果您足够耐心，可以在稍后点击 >。
    触摸设备上仍然需要点击两次，但至少当您有数十个视频时，页面不会崩溃。

此评论线程已关闭。如果您有重要信息需要分享，请 联系我们。

© 2024 . All rights reserved.