CSSのフルウィンドウの幅の背景ビデオ固定の高さ

Question

私はページの上にフルウィンドウ幅の背景ビデオ、airbnb.comのようなビットを作る必要があります - ビデオはフルスクリーンではないはずですが、むしろ固定された目に見える高さが480ピクセル（ビデオの下端からビデオが上端から切り取られるように）です。

編集を追加するには：ビデオは、可能なすべてのウィンドウ幅で上から切り取られます（さらに、このジャンボソリューションでは切り取られます）。さらに、ウィンドウの幅が1280pxより小さいビデオクリップ）。したがって、ウィンドウの幅が1280ピクセル以下の場合、ビデオは元のサイズ（ビデオ1ピクセル=画面上の1ピクセル）に留まります。上端と右端から切り取られます。しかし、ウィンドウの幅がビデオの幅よりも大きい場合、ビデオはページの幅全体（ビデオの1ピクセル=> 1ピクセルのピクセル以上）になるように引き伸ばされ、ビデオは上からずっと切り取られ始めますエッジではなく、もはや右端からのものではありません。

私はイメージでこれを行うことができますが、ビデオはイメージにこの影響をもたらす同じCSSと同様に反応しません。

私はこのハックと目標に近づく：

<video id="bgrvideo" width="100%" preload="auto" autoplay loop muted poster="../video/frontpage_bgr_video_1st_frame.jpg"> 
    <source src="../video/frontpage_bgr_video.mp4" type="video/mp4"> 
    </video> 

    video#bgrvideo { 
    position: absolute; 
    top:  120px; 
    left:  50%; 
    min-width: 100%; 
    min-height: 100%; 
    width:  auto; 
    height:  auto; 
    z-index: -99; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    } 

...と（1280×720）で、元の映像よりも広い窓幅に対して、その後いくつかのブレークポイント：

@media screen and (min-width: 1350px) { 
    video#bgrvideo { 
    position: absolute; 
    top:  100px; 
    left:  50%; 
    min-width: 100%; 
    min-height: 100%; 
    width:  auto; 
    height:  auto; 
    z-index: -99; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    } 
    } 

...など。

次に、ビデオよりも高いインデックスを持つ、ページ上部から480ピクセルの白い背景全体を追加して、ビデオのサイズが変更されてもビデオの下端を上から480ピクセル正確に切り抜きましたより大きな窓幅ではそれよりわずかに小さい。

このガントボールの解決策は、ページがわかりにくく水平スクロールバー（ビデオタグによって引き起こされる：ビデオを取り去り、スクロールバーが消える）を除いて、OKの結果を与える。ページを右にスクロールすると、空白の背景だけが表示されます。

スクロールバーを無効にすると、ページが正しく表示されます。しかし、私はカーペットの下で問題を掃除するのは好きではない、私はむしろ最初の場所で水平スクロールバーを引き起こさないソリューションを見つけるだろう。

私のガンボールソリューションを完全に取り除いて、フルページワイドバックグラウンド（またはフォアグラウンド）ビデオを、固定の目に見える高さ480ピクセル（ビデオの下部からビデオは上から切り取られます）。私は問題を解決したと思った瞬間のために

Answer 1

...しかし...

私は、水平スクロールバーを引き起こすものが見つかりました：

poster="../video/frontpage_bgr_video_1st_frame.jpg"

ポスター画像がが施されていませんすべてのクロップ設定が適用され、非常に大きなサイズにリサイズされます。ビデオタグからポスター設定を削除すると、水平スクロールバーの問題が取り除かれます。

ビデオの代替画像として、ビデオと同じアルゴリズム（すべてのブレークポイント付き）の画像をインデックスに付けて使用するようにしました。これにより、ユーザーは代替画像を見ることができませんビデオを再生する。

まだガンボールカードハウスですが、今では、水平スクロールバーの望ましくない副作用を引き起こさずに仕事をします。

しかし、いくつかの時間後に、追加して編集します。

問題は、私はページのこの部分には触れていないにもかかわらず、後で戻ってきました。私はページの他の場所にいくつかのものを追加し、2つのjqueryライブラリを含んでいました。誰が何に影響を与えるのかを知っている。突然、私は再び水平スクロールバーを持っていることに気付き、ビデオタグを削除するとスクロールバーが削除されます。

時間がありませんので、当分はスクロールバーを無効にします。しかし、私はこれのすべてに対してよりよい解決法を理解するでしょう。