After successfully implementing a fullscreen video background using the "video" tag with a video hosted on my own server, I decided to switch it out for a Vimeo video. However, after making the necessary code and CSS changes, the video now appears like this (see screenshot below).
https://i.sstatic.net/fzmSJ.png
The video is no longer fullscreen, and I'm struggling to understand why. Below is the updated code I used:
.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>
.
.
.