KPC
Kevin Powell - Community•2y ago
roycwilliams

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
Brightie•2y 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
briancross•2y ago
Are you able to replicate the problem in a code pen? It would be possible to actually troubleshoot it that way.

Did you find this page helpful?