Hello everyone, I have a website built using Bootstrap and I've created a simple header file that includes styling for the navigation bar, fonts, and layout. However, I'm facing an issue with making a video span 100% of the browser width with a maximum height of 800px. Despite my efforts, the video is not responsive and there is white space on the sides. Any assistance in achieving a centered, responsive video would be greatly appreciated! Below is a snippet of my index file:
<?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
min-width: 100%;
max-height: 800px;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body>