零 JavaScript 的性能优化视频嵌入

Every embedded video comes with a real cost to page load performance. Each player loads extra resources, whether the user ever hits play or not, as Chris Coyier noted in his blog post on “YouTube Embeds are Bananas Heavy and it’s Fixable”.

每个嵌入的视频都会对页面加载性能带来实际成本。每个播放器都会加载额外的资源，无论用户是否点击播放，正如 Chris Coyier 在他的博客文章 “YouTube Embeds are Bananas Heavy and it’s Fixable”中所指出的。

The approach of using [<lite-youtube>](https://github.com/paulirish/lite-youtube-embed) in that article works well when the video appears further down on the page and loads outside of the initial viewport. If the video is directly in the initial viewport, it can still cause a cumulative layout shift (CLS).

那篇文章中使用的 [<lite-youtube>](https://github.com/paulirish/lite-youtube-embed) 方法在视频出现在页面较下方并在初始视口外加载时效果很好。如果视频直接在初始视口中，它仍然可能导致累积布局偏移 (CLS)。

What if I told you you could lazy-load videos on interaction, without any JavaScript, even above the fold, with only native HTML and CSS?

如果我告诉你，你可以在交互时延迟加载视频，而无需任何 JavaScript，即使在首屏上方，也只需原生 HTML 和 CSS 即可实现呢？

The HTML elements <details> and <summary> can be used for a variety of purposes. The most common use case these days is creating an accordion without JavaScript. The visitor clicks the summary element, which behaves like a button, and the rest of the content is revealed. For that, the open attribute gets set on the <details> element. The visitor clicks the summary again, and the content collapses.

HTML 元素 <details> 和 <summary> 可用于各种目的。如今最常见的用例是不使用 JavaScript 创建手风琴。访客点击 summary 元素（它表现得像一个按钮），其余内容就会显示出来。为此， open 属性会被设置在 <details> 元素上。访客再次点击 summary，内容就会折叠。

When the page loads, the content inside <details>, except the <summary> element, is not displayed by default, making it an ideal tool for displaying content only after user interaction.

当页面加载时， <details> 内部的内容，除了 <summary> 元素，默认不显示，这使其成为仅在用户交互后显示内容的理想工具。

Modern HTML supports native lazy loading for images and iframes, a feature that Chris Coyier also used in his article. One thing to keep in mind is that when you load everything lazily, you can unintentionally ...