web-dev-qa-db-ja.com

CSSバックグラウンドビデオ

誰かがこのビデオの背景を中央に配置する方法を知っていますか？

私は試した：

margin: 0 auto;
text-align: center;

これまでのところ、どれもうまくいきませんでした。

これは私のコードです。

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

ウィンドウのサイズを変更した場合、どのようにこのビデオの背景を中央に配置して左側/右側を同じ量削除しますか？助けてくれてありがとう！

これが私のjsfiddleです： http://jsfiddle.net/pwxcvxe8/2/

htmlcssvideobackground
5
Stefan

HTML5要素を使用しているため、コンテンツを中央に配置するための最良の方法は、それを相対コンテナーに配置し、CSSに残りを次のように処理させることです。

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

もちろん、<video>を、中央に配置する任意の要素に置き換えることができます。 video要素を使用しているため、古いブラウザーはページが気に入らないと思うので無視します。また、min-の値を使用しない必要はありません。中央に配置されます。

22
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

modern browsers では、 object-fit コンテナなしでこれを行います。

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