I'm currently trying to adjust the background video to fit the parent div, but I am facing issues with adjusting its height within the media query. Any suggestions on how I can resolve this problem?
HTML
<div class="hero">
<video autoplay muted loop id="myVideo">
<source src="/videos/aerial(2).mp4" type="video/mp4" />
</video>
</div>
CSS
.hero{
position: relative;
z-index: 1;
height: 90vh;
width: 100%;
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
filter: brightness(65%);
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
#myVideo {
width: auto;
height: 100%;
}
}
@media (max-aspect-ratio: 16/9) {
#myVideo {
width: auto;
height: 100%;
}
}