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 and css:
<!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 class="header">
<nav>
<a href="index.html"><img src="images/logo.png"></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" 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 class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<video autoplay muted loop id="myVideo">
<source src="images/video-test.mp4" type="video/mp4">
</video>
<div class="text-box">
<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>
*{
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;
}
}
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;
}