如何提高 Iframe 嵌入视频的加载速度？

Question

大家好，stackoverflow 上可爱的人们。 我在 Dreamweaver 中使用 html 和 css 创建一个网站。

我从电视档案库中获取视频，并使用 iframe 将它们嵌入到我的网站上。以前工作正常，但最近需要很长时间才能缓冲。我可以做些什么来改善它吗？有时缓冲速度无法观察。

这是我当前使用的 HTML 和 CSS 代码。该容器旨在帮助网站适应手机和不同的屏幕。我不是一个程序员，所以我的工作方式可能不太理想，但它很实用。

非常欢迎任何建议。

提前致谢。

这是页面https://futurevisionfestival.com/

HTML

<td width="100%"><div class="container">
      <iframe class="responsive-iframe"  width="100%" height="100" src="https://www.salto.nl/embed/future-vision-amsterdam/2MNA3nOyWAGOAcImEg8IYQ"transparent=1" scrolling="no" overflow="hidden" allowfullscreen allowtransparency="true" frameborder="0"> </iframe>

    </div>

CSS

.container { overflow: hidden; border: 0; position: relative; width: 70%; margin-left: auto; margin-right: auto; padding-top: 45%; / 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) / scrolling: no; background-color: none;

}

Then style the iframe to fit in the container div with full height and width / .responsive-iframe { border: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 86%; margin-left: auto; margin-right: auto; scrolling: no;

}

将所有视频放在一页上可能太多了，我需要重新设计和重新思考结构。

我尝试在 iframe 中添加 loading="lazy"，但不确定它对改进有多大作用。我读到了有关 ajax 调用的内容，但我不是一个优秀的编码员，需要做更多的研究来学习如何实现它。任何意见或建议将不胜感激。

如果有帮助，您可以在此处查看电视档案中的源代码： 查看来源：https://www.salto.nl/programma/future-vision-amsterdam/

Answer 1

您已经尝试向 iframe 添加 loading="lazy"，这是一个很好的第一步。您可以尝试预加载 iframe。 参考如何预加载iframe

单个页面上有多个视频可能会导致性能开销，请考虑减少每页的视频数量或实现分页或延迟加载之类的功能，以便在用户滚动时加载视频。