My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I'm currently using:
HTML
<div class="hero">
<video autoplay muted loop playsinline 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%;
width: 100%;
}
@media (min-aspect-ratio: 16/9) {
#myVideo {
width: auto;
height: 100%;
}
}
@media (max-aspect-ratio: 16/9) {
#myVideo {
width: auto;
height: 100%;
}
}
I have gone through all potential issues like z-index conflicts and conflicting styles, but I just can't figure out why the video is stuck in its original size and not stretching to fit the parent .hero div completely.
Does anyone have any suggestions or solutions to make sure that the video element expands properly to fill the entire width of the parent div while still being responsive?
All queries work except for regular desktop: https://i.sstatic.net/TU8T4.jpg