Question

我需要在顶部创建一个带有全窗口宽度背景视频的页面，有点像airbnb.com - 但不同之处在于视频不应该是全屏，而是具有固定的可见高度480 px（从视频底部开始，视频会从顶部裁剪掉。）

编辑添加澄清：视频应该从顶部开始裁剪（并且在此gumball解决方案中会被裁剪），并且窗口宽度小于1280px（宽度为录像片段）。因此，当窗口宽度不大于1280像素时，视频保持原始大小（视频中的1个像素=屏幕上的1个像素） - 从上边缘和右边缘裁剪。但是当窗口宽度大于视频宽度时，视频会被拉伸以填充整个页面宽度（视频中的1个像素=＆gt;屏幕上超过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 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像素裁剪视频的下边缘，即使视频可能会略微调整大小低于窗口宽度的那个。

这个口香糖球的解决方案给出了一个OK结果，除了页面无法解释的水平滚动条（由视频标签引起：带走视频，滚动条消失）。向右滚动页面仅显示空白背景，几乎与页面本身一样宽。

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

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

Answer 1

我想我解决了这个问题......但是......

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

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

海报图片不受任何裁剪设置的影响，并且会调整为非常大的尺寸。从视频标签中删除海报设置可消除水平滚动条的问题。

作为视频的后备图像，我现在使用与视频相同的算法（具有所有断点）的图像大小和位置，在视频下编入索引，因此如果用户无法播放，则用户会看到后备图像视频。

仍然是一个口香糖的卡片室，但现在它可以完成工作，而不会造成水平滚动条的不必要的副作用。

但过了一些小时，编辑添加：

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

我没有时间这样做，所以暂时我会禁用滚动条。但我希望能更好地解决所有这些问题。

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

1 个答案: