Bonjour à vous !
Je suis très débutante en code, j'apprends sur le tas en autodidacte pour des fonctions très simples.

Je suis en train de créer une nouvelle page ou j'ai mis une vidéo en fond d'écran. J'aimerais que celle-ci épouse totalement le fond de la page, qu'elle soit fixe (dans le sens où si je déroule la page, elle reste en fond sans bouger et sans être répétée). Je n'arrive pas à trouver un seul code qui fasse bouger le format de ma vidéo de fond et je ne comprends pas du tout pourquoi, peu importe ce que je mets dans mon CSS, rien ne bouge :
http://pazapasrecords.fr/topsecret.html

Je remercie d'avance beaucoup les personnes qui prendront le temps d'y jeter un coup d'oeil pour m'aider Smiley prie Smiley loveu

Voici mes codes :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styletopsecret.css" />
       <title> top secret </title>
    </head>

        <body>

        <div id="background_container">

            <video autoplay loop muted id="background_container" >

                <source src="video/cov.webm" type="video/webm">
                <source src="video/cov copie.ogg" type="video/ogg">
                <source src="video/cov.mp4" type="video/mp4">

            </video>

        </div>


Et voici mon CSS :
[code=css]
.background_container {
position: absolute;
width: 100%;
height : 100%;
display: block;
z-index: -0;
background-position: center center;
background-repeat: no-repeat;
}
En attendant que tu résolves ton problème, fais un copié/coll/ dans un html tu verras c'est super (ce n'est pas de moi ,trouvé sur internet)

<html>
<head>
<style>
body {  background: rgb(138, 179, 219);  font-family: sans-serif;  font-size: 1.8em;  line-height: 1.8em;  overflow: hidden;}
.flex-on {  display: flex;}
#bloc-header {  background: lightslategrey;}
#logo {  color: white;}
#bloc-navigation {  position: absolute;  top: 0;  right: 0;}
.burger-btn {  margin-right: 15px;}
.burger-lien {  color: white;}
.burger-lien:hover {  color: lawngreen;}
.burger-lien:focus {  color: lightgreen;}
#menu.show li a{  pointer-events: auto;  cursor: pointer;}
#menu li a{  pointer-events: none;  cursor: default;}
#menu {  background-color: white;   opacity: 0;    transition: opacity 1s ease-in;  -webkit-transition: opacity 1s ease-in;  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;  -o-transition: opacity 1s ease-in;}
#menu.show {  opacity: 100;}
.item,#contact {  padding: 3px;}
.item::after,.item::after,.item::after {  content: "|";  padding-left: 3px;}
#bloc-video {  position: absolute;  right: 0px;  top: 0px;  width: 100%;  height: 100vh;  display: flex;  align-items: center;  justify-content: center;  z-index: -1;}
#bloc-titre {  position: absolute;  top: 45%;  left: 15%;  color: whitesmoke;}
h1 {  font-size: 2.3em;  margin-bottom: 3%;  font-weight: bold;}
p {  width: 95%;  line-height: 1.5em}
</style>

<script type="text/javascript">
function show(oEvent) { 
  var oEle = oEvent.currentTarget; 
  if(typeof timerMenuList !='undefined'){
    clearTimeout(timerMenuList);  
  }
  if(oEle.id=="menu"){
    if(!oEle.classList.contains("show")){
      return
    }
  }else{    oEle  = document.querySelector('#menu')  }
  if(oEvent.type == 'mouseleave'){
    timerMenuList = setTimeout(
      function(){      oEle.classList.remove("show");     }, 1000);
  }else{    oEle.classList.add("show");  }
};
document.addEventListener('DOMContentLoaded',function(){
  var js_menu = document.querySelector('#menu'),
      declencheur = document.querySelector('.burger-lien');
  declencheur.addEventListener('mouseenter', show);
  declencheur.addEventListener('mouseleave', show);
  js_menu.addEventListener('mouseleave', show);
  js_menu.addEventListener('mouseenter', show);
});
</script>
</head><body>
    <div id="bloc-video">
        <video autoplay loop muted>
            <source src="http://test.alidufresne.fr/videos/People__3606.mp4" type="video/mp4">
        </video>
    </div>
    <!--Le menu -->
    <div id="bloc-header" class="flex-on">
        <div id="logo">
            <i class="fab fa-creative-commons-sampling fa-3x"></i>
        </div>
        <div id="bloc-navigation" class="flex-on">
            <ul id="menu" class="flex-on">
                <li class="item"><a href="#historique" id="historique">historique</a></li>
                <li class="item"><a href="#portfolio" id="portfolio">portfolio</a></li>
                <li class="item"><a href="#Social" id="Social">Social</a></li>
            </ul>
            <div class="burger-btn">
                <a href="#" class="burger-lien"> O </a>
            </div>
            <div id="btn-contact">
                <a href="#" id="contact">Contact</a>
            </div>

        </div>

        <div id="bloc-titre">
            <h1>Le titre de la page ou du site internet</h1>
            <p>Fusce imperdiet metus enim. Vestibulum egestas nibh nunc, id fringilla odio lobortis eu. Donec tincidunt viverra gravida. Aenean laoreet augue in nisi lobortis interdum. Donec dui dui, consectetur at pharetra eget, eleifend et arcu. Pellentesque
                cursus enim nisi, ac euismod sem faucibus id. Aenean efficitur sem sit amet leo commodo fringilla. </p>
        </div>
 
Pas de résolution de ton problème, mais tu as dans ton code HTML deux ID de même nom :

<div id="background_container">

            <video autoplay loop muted id="background_container" >


Or, il ne peut y avoir qu'un ID d'un nom donné dans une page (X)HTML.

Si ça peut aider...