I am facing an issue with the main video on my website, where it shows a green background when resized. I suspect that the problem lies in the aspect ratio of the video. However, my main question is: Is it possible to make the height of the video responsive so that it fits the entire video container?
Here's a screenshot of how my video looks when resized:
https://i.sstatic.net/IjFSh.png
As you can see from the image, there are unwanted margins at the top and bottom when resizing the video. The background turns green because of the "bg-success" class in Bootstrap.
bg-success
I have also tried setting the video as a responsive item using the "embed-responsive-item" class, but it didn't work as expected. Instead, it caused the video to occupy more than just the browser height.
embed-responsive-item
Below is the code snippet along with a link to the corresponding CodePen:
HTML
<main class="d-flex w-100 h-100vh">
<aside class="sidebar">
<div class="col h-100vh d-flex flex-column justify-content-between">
<div>
<h1>Title</h1>
<hr />
</div>
<footer>
<p class="text-center">
<a href="index.html">Home</a>
</p>
</footer>
</div>
</aside>
<section class="workspace bg-success flex-fill">
<div class="video-container h-100vh d-flex flex-column">
<video autoplay loop class="main-video" controls="controls">
<source id="source_video" src="" type="video/mp4">
</video>
<div class="video-showcase">
<div class="row no-gutters">
<div class="col-sm-3">
<div class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item" controls="controls" onclick="firstVideo()">
<source src="" type="video/mp4">
</video>
</div>
</div>
<div class="col-sm-3">
<div class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item" controls="controls" onclick="secondVideo()">
<source src="" type="video/mp4">
</video>
</div>
</div>
<div class="col-sm-3">
<div class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item" controls="controls" onclick="thirdVideo()">
<source src="" type="video/mp4">
</video>
</div>
</div>
<div class="col-sm-3">
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item" controls="controls" onclick="fourthVideo()">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
CSS
.h-100vh {
height: 100vh;
}
.main-video {
width: 100%;
flex: 1 0 0;
}
.sidebar {
flex: 0 0 300px;
}
@media (max-width: 575px) {
.sidebar{
position: absolute;
top: 0;
left: 0;
width: 90%;
max-width: 300px;
transform: translateX(-100%);
}
.main-video{
flex: 0 0 56.25%;
}
}