固定高度的CSS全窗口宽度背景视频

Question

我需要在顶部制作一个带有全窗口宽度背景视频的页面，有点像 airbnb.com——但不同的是视频不应该是全屏的，而是有一个固定的可见高度 480 像素（从视频底部开始，因此视频会从顶部裁剪）。

编辑添加澄清：视频应该从顶部以所有可能的窗口宽度进行裁剪（并且在这个口香糖解决方案中确实被裁剪），另外从窗口宽度小于 1280 像素（这是录像片段）。因此，当窗口宽度不大于 1280 像素时，视频将保持原始大小（视频中的 1 个像素 = 屏幕上的 1 个像素）——从上边缘和右边缘裁剪。但是当窗口宽度大于视频宽度时，视频会被拉伸以填充页面的整个宽度（视频中的 1 个像素 => 屏幕上的 1 个像素以上），并且视频开始从顶部开始越来越多地被裁剪边缘，但不再是从右边缘。

我可以对图像执行此操作，但视频不会对相同的 CSS 做出类似的反应，这会导致图像出现这种效果。

我通过这个 hack 接近了目标：

 <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 x 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 像素处精确裁剪视频的底部边缘，即使视频可能会稍微调整大小在较大的窗口宽度下低于此值。

除了页面莫名其妙地出现水平滚动条（由视频标签引起：带走视频，滚动条消失）之外，此口香糖解决方案给出了其他结果。向右滚动页面只显示空白背景，几乎与页面本身一样宽。

我可以通过禁用滚动条来摆脱它，然后页面感觉就像它应该的那样。但我不喜欢把问题扫在地毯下，我宁愿找到一个一开始就不会导致水平滚动条的解决方案。

所以...欢迎您完全放弃我的口香糖解决方案，并介绍一种更智能的方法来制作整页宽背景（或前景）视频，固定可见高度 480 像素（从视频底部开始，所以视频从顶部裁剪）。

Answer 1

有一瞬间我以为我解决了问题……但是……

我找到了导致水平滚动条的原因：

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

海报图像未进行任何裁剪设置，并被调整为非常大的尺寸。从视频标签中移除海报设置，消除了水平滚动条的问题。

作为视频的后备图片，我现在使用与视频相同的算法（包含所有断点）大小和定位的图片，在视频下方进行索引，以便用户在无法播放时看到后备图片视频。

仍然是一个口香糖纸牌屋，但现在它可以完成这项工作而不会导致水平滚动条的不良副作用。

但几个小时后，编辑添加：

这个问题后来又出现了，尽管我没有触及页面的这一部分。我在页面的其他地方添加了一些其他内容，并包含了两个 jquery 库。谁知道什么影响什么。突然我意识到我又有了水平滚动条，删除视频标签会删除滚动条。

我没有时间做这个，所以我暂时禁用滚动条。但我希望有一个更好的解决方案。