Question

我将HTML视频作为背景，上面有一些覆盖，但是我遇到的问题是如何按比例缩放视频。我在.videoSection上设置了一定的高度，但是当浏览器缩小时，与其按照我的意愿缩放和剪切视频的结尾，不如将其重新缩放为更小的整体尺寸，视频下方的空白。希望我足够清楚。这是我的HTML：

<section class="topInfo1">
        <div class="videoSection">
            <video id="video-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
                <source src='/CMS_Static/Uploads/313864614C6F6F/C0071_1-1.mp4' type="video/mp4">
            </video>
        </div>
        <div class="videoOverlay">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h1>Marketing the Boating and Marine Industry Through Video</h1>
                    </div>
                    <div class="col-sm-4 col-sm-offset-4">
                        <a class="btn topInfoBtn btn-block" href="/services">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

和CSS

.videoSection {
        position: relaltive;
        width: 100%;
        height: 650px;
        overflow: hidden;
    }
    #video-elem {
        width: 100%;
    }
    .videoOverlay {
        background: rgba(0,0,0,0);
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

Answer 1

我签出this tutorial，看起来<video>元素上的键样式是：

#video-elem {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

但是，在您的情况下，您似乎只需要一个视频标题（而不是全屏固定视频，因此您需要：

position: absolute;

Here's a demo我煮熟了。

Answer 2

尝试一下：

CSS：

video {
 object-fit: cover;
 background-size: cover;
 width:100%;
 height: 100%; 
 position: absolute; 
 top: 0; 
 left: 0;
}

HTML：

<video muted="" playsinline="" autoplay=""  loop="" preload="auto">
  <source src="/CMS_Static/Uploads/313864614C6F6F/C0071_1-1.mp4" type="video/mp4">
</video>

如何缩放HTML背景视频

2 个答案: