Search code examples
htmlcssbootstrap-5embed

iframe embed video not fullscreen

I wrote code for fullscreen video background in BS5 with "video" tag (video insert from my hosting). And it worked perfectly (screenshot below).

enter image description here

Now I want to change video from my hosting to Vimeo. And I changed my code and CSS. But video now appear like this (screenshot below).

enter image description here

Now video not fullscreen and I can't undestand why. Here is my code.

.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>
    .
    .
    .

Solution

  • Thanks to @john comment. Working code:

    .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;
}