如何调整 HTML 背景视频的大小？答案

【问题标题】：How to resize HTML background video?如何调整 HTML 背景视频的大小？
【发布时间】：2018-10-31 21:03:48
【问题描述】：

从一个网站主题，我有以下内容切断了我的视频的顶部。我希望能够重新调整视频的大小，即使这意味着不拉伸整个屏幕 -

<section class="home-section bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
        <div class="video-player" data-property="{videoURL:'https://www.youtube.com/watch?v=MY_VIDEO_URL', containment:'.home-section', startAt:2, mute:true, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:0}"></div>
        <div class="video-controls-box">
          <div class="container">
            <div class="video-controls"><a class="fa fa-volume-up" id="video-volume" href="#">&nbsp;</a><a class="fa fa-pause" id="video-play" href="#">&nbsp;</a></div>
          </div>
        </div>
        <div class="titan-caption">
          <div class="caption-content">
            <div class="font-alt mb-30 titan-title-size-1">Hello &amp; welcome</div>
            <div class="font-alt mb-40 titan-title-size-4">asdf</div><a class="section-scroll btn btn-border-w btn-round" href="#about">Learn More</a>
          </div>
        </div>
      </section>

这是home-section的CSS：

.home-section {
  position: relative;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  z-index: 0;
  background-size: cover;
}

我该怎么做？

链接到我正在修改的模板 html 页面：

http://markup.themewagon.com/titan/index_mp_classic_video_background.html

我的浏览器上的区域为 1900 x 800 像素。我的视频是 1280 x 720。所以比例不正确，视频被截断。因此我想调整大小。

希望这是有道理的，感谢您的帮助。有任何问题或不清楚的地方请告诉我。

【问题讨论】：

标签： html css

【解决方案1】：

您可以尝试更改为background-size: contain;，这样它会缩放视频以填满屏幕大小

【讨论】：

谢谢，我试过了，但似乎没有任何区别
您是覆盖主题的 css 还是自己编写？如果我尝试更改您提供的链接，它实际上会使背景适合屏幕而不是填充它
我明白了，实际上这将是正确的方法，我不知道为什么它不应该工作......也许我不理解你期望的行为；我将在答案中添加一张图片，以澄清我的意思
顺便说一下，更改属性后，尝试使用Ctrl + F5重新加载浏览器
你可以这样做，margin-top: 实际上会与该部分在同一类上，因为这是你必须向下推的内容