フルスクリーンの背景ビデオを中心に維持する

Question

HTML5で再生している背景ビデオがあるサイトを作成しようとしています。 これは完全に機能しています。 しかし、ユーザーがブラウザのサイズを変更しても、画面の中央に画像を保存したいと考えています。

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video> 

これはいくつかのjQueryで動作するようになっていますが、このためのCSSソリューションがあるかどうか疑問に思っていました。

function resizeHandler() { 
     // scale the video 
     var documentHeight = $(document).height(); 
     var documentWidth = $(document).width(); 
     var ratio = $('#video').width()/$('#video').height(); 

     if((documentWidth/documentHeight) < ratio) { 
      $('#video').css({ 
       'width': 'auto', 
       'height': '100%', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginRight = $('#video').width() - $(document).width(); 
      $('#video').css('left', -marginRight); 
     } else { 
      $('#video').css({ 
       'width': '100%', 
       'height': 'auto', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginTop = $('#video').height() - $(document).height(); 
      $('#video').css('top', -marginTop); 
     } 
    } 

これは、画像を画面に合わせて伸ばし、画像を中央に並べるように書いたjQueryです。 これはCSSで可能かどうかはわかりませんが、もし誰かがそれを知っていれば、これはいいかもしれません。

Answer 1

これは、ビューポート全体のサイズを#videoにして、ユーザーがスクロールしたときにそのままにする必要があります。

#video { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

Answer 2

この質問は、ちょうど私がそのために私の答えは、あなたが探していたいずれかであることができると思いますPlace video with 100% height & 100% width using css or javascript

に参照されていますか？ここで

はコードです：

header { 
 
    position: relative; 
 
    height: 100vh; 
 
    z-index: 0; 
 
} 
 
header h1 { 
 
    text-align: center; 
 
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; 
 
    color: #fff 
 
} 
 
header video { 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -o-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
}

<header> 
 
    <h1>Sample Title</h1> 
 
\t <video autoplay loop class="bg-video"> 
 
\t \t <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> 
 
\t </video> 
 
</header>

そして、ここではworking fiddle exampleです。

はそれが私が固定されたラッパーの内側の絶対位置でビデオを中心にしようと、他の誰か:)

Answer 3

を助けいただければ幸いです。ですから、例えば：

置き、100％の幅と高さで固定されたラッパーの中にあなたのビデオ：

#video-wrap { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

センターマージン自動で余分な大面積の内部映像：

#video { 
    position: absolute; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
} 

最小幅と最小高さでフルサイズに伸ばします。

ここで、最終結果

#video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

---

：ここでもjsfiddle

#video-wrap { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: -9999px; 
 
    bottom: -9999px; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    margin: auto; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<div id="video-wrap"> 
 
    <video id="video" loop autoplay> 
 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

。

Answer 4

Cssプロパティを使用します。オブジェクトフィット：カバー;

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
video { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<video controls> 
 
    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
</video>