提问人：Nikita Pelevin 提问时间：11/17/2023 最后编辑：Nikita Pelevin 更新时间：11/18/2023 访问量：37
iframe 嵌入视频不是全屏的
iframe embed video not fullscreen
问：
我在 BS5 中为带有“video”标签的全屏视频背景编写了代码（来自我的主机的视频插入）。它运行良好（下面的屏幕截图）。
现在我想将视频从我的主机更改为Vimeo。 我更改了我的代码和 CSS。但是视频现在看起来像这样（下面的屏幕截图）。
现在视频不是全屏的，我无法解释为什么。 这是我的代码。
.bgbanner iframe, .bgbanner img {
width: 100vw;
height: 100%;
object-fit: cover;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: -100;
}
.bgbanner .bgbanner-overlay {
background: rgba(0, 0, 0, 0.15);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -99;
}<!DOCTYPE html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>
<body class="h-100">
<header id="hero" class="h-100">
<div class="container d-flex flex-column h-100 px-md-0 py-4">
<nav class="navbar navbar-dark navbar-expand-lg p-0">
.
.
.
</nav>
<div id="bgbanner" class="bgbanner">
<div class="bgbanner-overlay"></div>
<iframe src="https://player.vimeo.com/video/45878034?background=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="hero-bottom" class="mt-auto">
.
.
.
</div>
</div>
</header>
.
.
.答：
7赞
john
11/18/2023
#1
似乎问题可能与CSS和视频的嵌入方式有关。对于 Vimeo 视频，要获得整页背景视频，您可能需要调整 CSS 以确保视频覆盖整个视口。以下是一些建议：
尝试调整 iframe 及其容器的 CSS 以覆盖整个视口：
.bgbanner {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bgbanner iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 56.25vw; /* 16:9 aspect ratio */
min-height: 100vh;
}
调整 iframe 的高度和最小高度值以保持纵横比并覆盖整个视口，而不会出现黑条或失真。
Vimeo 提供了一些嵌入选项。对于背景视频，您可能希望将 background=1 和 autoplay=1 等参数添加到您的 Vimeo URL。
<iframe src="https://player.vimeo.com/video/45878034?background=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
这些参数有助于确保视频充当背景元素并自动开始播放。
评论
0赞
Nikita Pelevin
11/18/2023
谢谢@john。我使用您建议的代码，但视频仍然无法拉伸到全屏。但我理解你的想法并修改代码。现在一切正常。请参阅下面的代码。
0赞
Nikita Pelevin
11/18/2023
#2
感谢@john评论。 工作代码：
.bgbanner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.bgbanner iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -100;
}
.bgbanner .bgbanner-overlay {
background: rgba(0, 0, 0, 0.15);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -99;
}上一个：如何定义列表 [已关闭]
评论