Kevin Powell - Community•11mo ago

How can I adjust the video to fit the height of parent div?

I'm working on fitting the background video to fit the parent div but it is not adjust to the height within the media query. Any ideas on how I can fix this?

.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: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

.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: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

2 Replies

Brightie•11mo ago

and if you put the height to 100% instead of auto, wouldn't that do the trick? I'm just thinking out loud here xd If that doesn't do the trick I wouldn't know either Also, just wondering but if you do the same code for min-aspect-ratio and max-aspect ratio, doesn't it just have to fill the parentElement regardless of aspect-ratio/screen size? Can't you just literally remove the media queries in that case? Like aren't you basically saying IF Aspect ratio >= 16/9 DO css IF Aspect ratio <= 16/9 DO exact same css

briancross•10mo ago

Are you able to replicate the problem in a code pen? It would be possible to actually troubleshoot it that way.

Gaming

Programming

How can I adjust the video to fit the height of parent div?