it-swarm.com.de

Css-Hintergrundvideo

Kann jemand diesen Videohintergrund zentrieren?

Ich habe es versucht:

margin: 0 auto;
text-align: center;

Bisher hat aber keiner davon funktioniert.

Das ist mein 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;
}

Wie zentriere ich diesen Videohintergrund so, dass er auf der linken/rechten Seite den gleichen Betrag entfernt, wenn Sie die Größe des Fensters ändern? Danke fürs Helfen!

Hier ist mein jsfiddle: http://jsfiddle.net/pwxcvxe8/2/

5
Stefan

Da Sie ein HTML5-Element verwenden, können Sie den Inhalt am besten zentrieren, indem Sie ihn in einen relativen Container stellen und den Rest dann wie folgt mit CSS behandeln lassen:

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

Sie können <video> natürlich durch jedes Element ersetzen, das Sie zentrieren möchten. Da Sie das Element video verwenden, ignoriere ich ältere Browser, da sie Ihrer Seite sowieso nicht gefallen. Sie müssen auch nicht müssen die min--Werte verwenden, und es würde sich nur zentrieren. 

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

In modernen Browsern können Sie object-fit bearbeiten und dies ohne den Container tun.

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