18041 sujets

Questions générales et questions de débutants

[Résolu] Video Background Responsive

Bonjour,

J'ai essayé plein de codes différents pour tenter de mettre une vidéo en background, j'aimerais que la taille s'adapte totalement, quitte à déformer la vidéo.

Voici le site : http://pazapasrecords.fr/test.html

Comme vous pouvez le voir, il y a une bande blanche au dessus et une marge à gauche, je ne comprends pas pourquoi.

Voici mes codes : 

  
<video  id="videoBG" poster="image/poster.png" autoplay loop autobuffer muted >
            <source src="video/cov.webm" type="video/webm" />
            <source src="video/cov.mp4" type="video/mp4" />
            <source src="video/cov copie.ogg" type="video/ogg" />

            
</video>


Et mon CSS 


#videoBG {
position: fixed; 
  z-index: -1;
  width: 100%;
  height : auto;
  
}

@media (min-aspect-ratio: 16/9) {
  #videoBG {
    width : 100%;
      height : auto;
 }
  }

@media (max-aspect-ratio: 16/9) {
  #videoBG {
    width : auto;
      height : 100%;
 }
  }


Merci beaucoup, ça m'aiderait énormément que quelqu'un se penche dessus pour m'aider Smiley prie Smiley prie
Modérateur
Et l'eau Blondine,

jette un coup d'oeil sur ce code ci-dessous. J'ai mis l'attribut control afin que tu puisses lancer la video. Bizarrement, chez moi l'autoplay ne fonctionne pas. je t'avoue ne pas chercher à comprendre puisque ce n'est pas le but recherché. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
#wrap-video-bg{
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:-1;
}

#wrap-video-bg video{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

#lambda{
  position: absolute;
  left: 50%;top: 50%;transform:translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background: #fff;
}
    </style>
</head>
<body>
    <div id="wrap-video-bg">
        <video autoplay controls> 
            <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.mp4" type="video/mp4" /> 
            <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.webm" type="video/webm" /> 
            <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" /> 
        </video> 
    </div>
    <div id="lambda"></div>
</body>
</html>

Modifié par niuxe (22 Apr 2020 - 05:58)
Merci beaucoup niuxe, rien que le premier code de @wrap-video-bg fonctionne très bien, j'ai juste collé ça pour remplacer mon css. 

 {
#videoBG
overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:-1;
}


On est d'accord que ceux d'après sont juste d'autres tests ?
Je me demande aussi pourquoi est ce que c'est directement glissé dans le code html ? Ca devrait marcher sur la feuille CSS non ?

Autre chose, chez moi la vidéo se met directement en autoplay Smiley hum , sous firefox et sous chrome Smiley biggol , peut être que c'est une question de poids de la vidéo, pourtant très bas (21mo) ?

En tous cas merci encore ! Smiley clapclap
Modérateur
blondine a écrit :
Merci beaucoup niuxe,

De rien Smiley smile


blondine a écrit :

....
On est d'accord que ceux d'après sont juste d'autres tests ?
...

Oui, c'est pour te montrer qu'on peut passer un élément sur la vidéo.
blondine a écrit :

...
Je me demande aussi pourquoi est ce que c'est directement glissé dans le code html ? Ca devrait marcher sur la feuille CSS non ?
...


Oui

blondine a écrit :

....
Autre chose, chez moi la vidéo se met directement en autoplay Smiley hum , sous firefox et sous chrome Smiley biggol , peut être que c'est une question de poids de la vidéo, pourtant très bas (21mo) ?
....

jette un coup d'oeil à ce lien
Modifié par niuxe (22 Apr 2020 - 11:18)
Sujet clos
Aller à