I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to use a video as the background, but I'm unsure if it's possible to set a video as the background directly in CSS. Any guidance is appreciated.
/* font-family: 'Sedgwick Ave'; */
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
/* font-family: 'Bebas Neue' */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* font-family: 'Nunito' */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;
/* border:1px solid red; */
}
/*General Styles*/
html,body {
font-size: 62.5%;
/* background-image: url('/images/home-page-bg-black.jpg'); */
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
}
nav {
position: relative;
height: 100vh;
text-align: center;
display: flex;
justify-content: space-evenly;
}
nav a{
text-decoration: none;
font-size: 2.2em;
color: white;
margin-top: 2%;
font-family: 'Bebas Neue';
}
.boxes{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.box{
background-color: red;
position: relative;
width: 10%;
height: 80px;
display: flex;
align-content: center;
}
.box h4{
text-align: top;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<div id=".container">
<video autoplay muted loop poster id="myVideo">
<source src="/images/Cyberpunk1-1 (2021_04_28 20_59_30 UTC).mp4" type="video/mp4">
</video>
<nav>
<a href="#" id="nav-home">Home</a>
<a href="#" id="nav-about">About</a>
<a href="#" id="nav-project">Projects</a>
<a href="#" id="nav-contact">Contact</a>
</nav>
<div class ="boxes">
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
</div>
</div>
</body>
</html>