私の背景ビデオがバックグラウンドで再生されないようです。

Question

私のビデオは私のウェブサイトの背景で再生しようとしていますが、なんらかの理由でそれは他のすべてのコンテンツサイト。私は何が起こっているのか分からない。

CSS

.fullscreen { 
 
    position:static; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow:hidden; 
 
    z-index: -100; 
 
      } 
 

 
.fullscreen-vd { 
 
    position:absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: auto; 
 
    height: auto; 
 
    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%); 
 
} 
 

 
@media (max-width: 0px) { 
 
    .fullscreen { 
 
     background: url('gif.mp4') center center/cover no-repeat; 
 
    } 
 
    .fullscreen-vd { 
 
     display: none; 
 
    } 
 
} 
 

HTML

<div class="fullscreen"> 
 
      <video loop autoplay muted poster="IMG_25062017_221924_0.png" class="fullscreen-vd"> 
 
    <source src="gif.mp4" type="video/mp4"> 
 
    </video> 
 
     </div>

Answer 1

あなたに避難所を、このアップデートにいくつかのCSSの一部を試してみて、それを得るために、いくつかの部分を削除し、ビデオにはwidthとheightをビデオにするため、私は100%heightとを使用しました。

あなたは、あなたのビデオにcenterverticallyとhorizontallyを揃えるためにfullscreen-vdクラスを使用し、ビデオ用の固定heightとwidthを使用した場合。

私は働くスニペットを投稿しました。

As your requirement fiddle link

body, 
 
html { 
 
    width: 100%; /* For take full height and width */ 
 
    height: 100%; 
 
} 
 

 
.fullscreen { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: -100; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* NO NEED BECAUSE YOUR VIDEO IS OCCUPY FULL HEIGHT AND WIDTH */ 
 

 
/* .fullscreen-vd { 
 
    position:absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: auto; 
 
    height: auto; 
 
    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%); 
 
} */ 
 

 
.content { 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
@media (max-width: 0px) { 
 
    .fullscreen { 
 
    background: url('gif.mp4') center center/cover no-repeat; 
 
    } 
 
    .fullscreen-vd { 
 
    display: none; 
 
    } 
 
}

<div class="fullscreen"> 
 
    <video width="100%" loop autoplay muted poster="IMG_25062017_221924_0.png" > 
 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/mp4"> 
 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/webm"> 
 
</video> 
 
</div> 
 
<div class="content"> 
 
    <h1> 
 
    HELLO 
 
    </h1> 
 
</div>