1

我将我的 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;
    }
4

2 回答 2

1

我查看了本教程，看起来<video>元素上的关键样式是：

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

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

position: absolute;

这是我制作的一个演示。

于 2018-10-30T22:40:05.097 回答
0

尝试这个：

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>
于 2018-10-30T22:42:58.683 回答