Background video on website is not adjusting well to fit the window/screen-CodePudding

I'm a beginner coder and i'm trying to add a background video for the home page. The problem is when i'm making my window smaller, or even in mobile mode (?) the video won't resize and adjust to the window, which makes you able to scroll to the side and show the menu i've hidden for mobile view

The background video code and entire page atm

html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="with-device-width, initial-scale=1.0">
    <title>page title</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<section >        
    <nav>
        <a href="index.html"><img src="images/logo.png"></a>
        <div  id="navLinks">
            <i  onclick="hideMenu()"></i>  
            <ul>
                <li><a href="">ACCUEIL</a></li>
                <li><a href="">L'ÉTUDE</a></li>
                <li><a href="">BIENS</a></li>
                <li><a href="">CONNECTION</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
        <i  onclick="showMenu()"></i>
    </nav>
    <video autoplay muted loop id="myVideo">
        <source src="images/video-test.mp4" type="video/mp4">
    </video>  
    <div > 
        <h1>TITLE</h1>
        <p>subtitle</p>
    </div>
</section> 


<!-------- JavaScript for toggle Menu -------->
<script>

    var navLinks = document.getElementById("navLinks");

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

</body>

</html>

css:

*{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    }
    
    /* old background image, there is none */
    .header{
    min-height: 100vh;
    width: 100%;
    background-color:white;
    background-position: center;
    background-size: cover;
    position: relative;
    }

    /* background video */
    #myVideo {
        position: static;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        overflow: hidden;
    }


    /* logo, navigation (about etc)   animation quand on va sur le txt */
    nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    }
    nav img{
    width: 90px;
    }
    .nav-links{
    flex: 1;
    text-align: right;
    }
    .nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
    }
    .nav-links ul li a{
    color: black;
    text-decoration: none;
    font-size: 13px;
    }
    .nav-links ul li::after{
    content:'';
    width: 0%;
    height: 2px;
    background: black;
    display: block;
    margin: auto;
    transition: 0.2s;
    }
    .nav-links ul li:hover::after{
    width: 100%;
    }
    
     /* titre et sous-titre */
    .text-box{
    width: 90%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    }
    .text-box h1{
    font-size: 62px;
    }
    .text-box p{
    margin: 10px 0 40px;
    font-size: 16px;
    color: white;
    }

    /* mobile view*/

    nav .fa{
        display: none;
    }
    
    @media(max-width: 700px) {
        .text-box h1{
            font-size: 62px;
        }
        .nav-links ul li{
            display: block;
        }
        .nav-links{
            position: absolute;
            background: rgb(255, 255, 255);
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 0.6s;

        } /* problème d'affichage du menu sur tel */
        nav .fa{
            display: block;
            color: black;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }
        .nav-links ul{
            padding: 30px;
        }
    }

CodePudding user response：

you only have max-width in your video, add width: 100%;

    #myVideo {
        position: static;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        overflow: hidden;
    }