I'm new to coding and I'm attempting to incorporate a background video on the homepage. The issue arises when I resize my window or view it on a mobile device, as the video fails to adjust to the window size, causing side scrolling that reveals the hidden menu for mobile view.
Here is the current code for the background video and entire page:
HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=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="">HOME</a></li>
<li><a href="">STUDY</a></li>
<li><a href="">PROPERTIES</a></li>
<li><a href="">LOGIN</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%;
}
/* title and subtitle */
.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;
}
}