web-dev-qa-db-fra.com

Css vidéo d'arrière-plan

Est-ce que quelqu'un sait comment centrer ce fond vidéo?

J'ai essayé:

margin: 0 auto;
text-align: center;

Jusqu'à présent, mais aucun d'entre eux n'a fonctionné.

Ceci est mon code.

Html:

<video autoplay loop poster="polina.jpg" id="vid">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>

Css:

video#vid {
 position: fixed; right: 0; bottom: 0;
 min-width: 100%; min-height: 100%;
 width: auto; height: auto; z-index: -100;
 background: url(polina.jpg) no-repeat;
 background-size: cover;
 margin: 0 auto;
}

Comment puis-je centrer ce fond vidéo afin qu'il supprime le même montant du côté gauche/droit si vous redimensionnez la fenêtre? Merci pour ton aide!

Voici mon jsfiddle: http://jsfiddle.net/pwxcvxe8/2/

htmlcssvideobackground
5
Stefan

Comme vous utilisez un élément HTML5, le meilleur moyen de centrer le contenu est de le placer dans un conteneur relatif, puis de laisser CSS gérer le reste de la manière suivante:

<div id="Container">
    <video></video>
    <div></div>
</div>

body, html {
    height: 100%;
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just Nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#Container div {
    position: relative;
    z-index: 1;
}

Vous pouvez bien sûr remplacer <video> par n'importe quel élément que vous souhaitez centrer. Étant donné que vous utilisez l'élément video, j'ignore les anciens navigateurs, car ils n'aimeront certainement pas votre page. De plus, vous n'avez pas devez utiliser les valeurs min- et le centre serait simplement centré. 

21
somethinghere
   .name-class {
    background: url(../images/tv-temp.png) no-repeat;
    background-position: center;
    height: 686px;
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    }
    .name-class video {
    height: 473px;
    position: absolute;
    top: 148px;
    left: 3px;
    width: 100%;
    }
<div class="name-class">
<video controls playsinline="" loop="" autoplay="">
<source src="..\video-name.mp4" type="video/mp4" autostart="true">

</video>
</div>
0
ati.mobini

Dans les navigateurs modernes , vous pouvez manipuler object-fit et le faire sans le conteneur.

video.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
0
Brad