HTML5 video doesn't load properly on Android device

Question

I have a section with video as background. The video is supposed to cover the entire area of the section, which it does on PC and iPhone. For some reason on a few Android devices (different browsers, different version and different models) the video doesn't stretch but loads the way shown in a pic.

I'm not sure what exactly to check because not even all devices can reproduce the issue and I don't know what exactly is wrong with the code because I can't see the same problem in Devmode on PC. Would appreciate any help or direction.

my HTML code

        <section id="mainSection00" class="mainSection">
            <div class="fullscreen-bg">
                <video autoplay loop muted playsinline class="fullscreen-bg__video">
                    <source src="<?php echo G5_THEME_URL; ?>/assets/img/main_medium.mp4" type="video/mp4">
                    "Your browser does not support the video tag"
                </video>
            </div>
            <div class="content">
                <div class="content_wrapper">
                    <h1>Text</h1>
                </div>
            </div>
        </section>

my CSS

#mainSection00 {
    max-width: 1920px;
    width: 100%;
    min-height: 100vh;
    height: 100%;
}

.fullscreen-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    background-color: #000;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fullscreen-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

(this code is to keep the aspect ratio for the full screen)
@media (min-aspect-ratio: 1.7777777778) {
    .fullscreen-bg__video {
        height: 300%;
        top: -100%;
        left: -180px;
        width: 113%;
    }
}

@media (max-aspect-ratio: 1.7777777778) {
    .fullscreen-bg__video {
        width: auto;
    }
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url("../assets/img/main_banner.mp4") center center / cover no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}

.content {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.content h1 {
    color: #fff;
    font-size: 70px;
    ;
}

(for mobile query)

    #mainSection00 {
        min-height: 650px;
        max-height: 750px; /*to avoid blank space under video*/
    }

    .fullscreen-bg__video {
        min-width: auto;
        min-height: 100%;
        left: -80px; /*to display a certain part of the video*/
    }

   .content {
        transform: translate(-50%, -65%);
    }

I have tried to disable different parts of the code, use different video format