背景ビデオCSS（フルスクリーンではない）

Question

誰にでも良い日！ バックグラウンドビデオに関する質問がありますが、ページ全体に添付していますが、上部に埋め込む必要があります。誰が問題があるのか​​教えていただけますか？ 大きな感謝！ HTML：

<video autoplay loop poster="video-bg.jpg" id="bgvid"> 
    <source src="video-bg.webm" type="video/webm"> 
    <source src="video-bg.mp4" type="video/mp4"> 
</video> 

CSS：

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(video-bg.jpg) no-repeat; 
    background-size: cover; 
} 
@media screen and (max-device-width: 800px) { 
    html { 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
    } 
    #bgvid { 
     display: none; 
    } 
} 

Answer 1

初とposition: fixedを置き換えるページをスクロールしたときにも、動画をスクロールしたい場合にのみ、水平方向
最後にtop: 0;

へtop: 50%;を変更する要素を移動するtransform: translateX(-50%);でtransform: translateX(-50%) translateY(-50%);を置き換えたよりmin-width/height: 100%;
を削除position: absolute;

#bgvid { 
 
    background: none #aaa !important; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
#bgvid { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    /*min-width: 100%;*/ 
 
    /*min-height: 100%;*/ 
 
    -ms-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    z-index: -100; 
 
    background: url(video-bg.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 
@media screen and (max-device-width: 800px) { 
 
    html { 
 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
 
    } 
 
    #bgvid { 
 
     display: none; 
 
    } 
 
}

<div id="bgvid">VIDEO HERE</div>

Answer 2

位置は、それがページ全体に固定されるように固定されています。 position: absolute;を使用すると、高さが&に変更されます。