Vídeo de fundo do Css

Alguém sabe como centrar este fundo de vídeo?

tentei: 

margin: 0 auto;
text-align: center;
Até agora, mas nada disto funcionou.

Este é o meu código.

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;
}

Como é que centralizo este fundo de vídeo para que ele remova do lado esquerdo/direito a mesma quantidade se redimensionar a janela? Obrigado pela ajuda!

Aqui está o meu jsfiddle. http://jsfiddle.net/pwxcvxe8/2/

Author: Stefan, 2014-11-13
Source

3 answers

Uma vez que está a usar um elemento HTML5 a melhor maneira de centrar o conteúdo é colocá-lo num contentor relativo e depois deixar o CSS tratar do resto assim:

<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;
}

Podes substituir <video> por qualquer elemento que queiras centrar, claro. Porque você está usando o elemento video eu estou ignorando navegadores mais velhos como eu acho que eles não vão gostar da sua página de qualquer maneira. Você também não tem que usar os valores min-, e isso apenas se centraria.

 21
Author: somethinghere, 2014-11-13 09:56:44

Em navegadores modernos, você pode manipular object-fit e fazer isto sem o contentor.

video.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 0
Author: Brad, 2017-08-22 20:39:44 
   .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
Author: ati.mobini, 2018-07-04 06:03:46