使用 iframe 构建视频显示

Source: Dev.to

概览

在完成了几节关于 iframe 元素的理论课程后，我继续参加了 freeCodeCamp 的 使用 iframe 构建视频展示 工作坊。练习从一个简单的 HTML 模板开始，逐步为 iframe 元素引入新的属性。

添加标题

第一步是添加一个标题，文本为 iframe Video Display。

创建 iframe

随后创建了一个 “ 元素，并将 src 属性设置为提供的 YouTube 链接。

配置 allow 属性

在第六课中，allow 属性被扩展为包括：

• encrypted-media – 启用加密媒体扩展，以保护视频。
• gyroscope – 允许访问设备传感器。
• web-share – 通过原生分享对话框共享 iframe 内容。

完整的 allow 值现在为：

accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share

设置 referrerpolicy

倒数第二个练习要求添加 referrerpolicy 属性，值为 strict-origin-when-cross-origin。该属性控制从页面导航到 iframe 时在 Referer 头中发送的信息。

referrerpolicy="strict-origin-when-cross-origin"

启用全屏播放

最后，添加了 allowfullscreen 属性，以便视频可以在全屏模式下观看。

allowfullscreen

结论

本工作坊介绍了多个新概念——如配置 allow 属性、使用 referrerpolicy，以及启用全屏播放——这些内容将在下一个实验 构建视频合集页面 中进一步巩固。