知识库 → 在网站上以 100% 宽度嵌入自适应视频

当您通常在网站上嵌入视频时，代码中会指示帧大小，事实证明，当您更改屏幕分辨率时，在不同设备上显示嵌入在网站上的视频，而不考虑屏幕，就好像您已在视频托管本身上打开它。

我们的任务是确保当页面大小改变时，视频帧自动改变其大小。从不同设备打开网站时，视频将根据屏幕尺寸进行调整。

本手册已经过 YouTube 和 MediaCMS 应用程序的测试。

默认情况下，您会收到如下链接：

<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>

为了使视频自动调整，让我们将此代码添加到表单中：

<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

正如您所看到的，我们删除了固定尺寸并添加了 2 个 css 类：容器和视频。

现在我们需要将这些类添加到我们网站的样式文件中：

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

容器元素的高度为零，底部填充百分比。底部填充百分比是容器宽度的百分比，因此它具有固定的宽高比。但为了使 iframe 显示在零高度容器内，我们需要通过将其放置在 div 内来使容器相对，使 iframe 绝对。

不要忘记将版本添加到 css 文件的路径中，这样当您再次打开它时，将加载实际的样式文件，而不是浏览器之前保存的缓存版本。

例子：

<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">

现在，您的嵌入视频将自动适应屏幕尺寸或浏览器窗口尺寸。