iframe 嵌入视频不全屏

Question

我在 BS5 中使用“视频”标签编写了全屏视频背景代码（从我的主机插入视频）。而且效果非常好（下面的截图）。

现在我想将视频从我的托管更改为 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>
    .
    .
    .

Answer 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 提供了一些嵌入选项。对于背景视频，您可能需要向 Vimeo URL 添加参数，例如：background=1 和 autoplay=1。

<iframe src="https://player.vimeo.com/video/45878034?background=1&autoplay=1" frameborder="0" allowfullscreen></iframe>

这些参数有助于确保视频充当背景元素并自动开始播放。

iframe 嵌入视频不全屏

问题描述投票：0回答：1

1个回答

最新问题

iframe 嵌入视频不全屏

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1