如何调整HTML背景视频的大小?

时间:2018-10-31 21:03:49

标签: html css

从一个网站主题来看,我有以下内容可以截断我的视频的顶部。我希望能够调整视频的大小,即使这意味着不要在整个屏幕上伸展-

<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 x720。因此比例无法正常工作,视频被截断。因此,我想调整大小。

希望如此,感谢您的帮助。如有任何疑问或不清楚的地方,请通知我。

1 个答案:

答案 0 :(得分:1)

您可以尝试更改为background-size: contain;,以便缩放视频,使其充满屏幕尺寸

enter image description here

enter image description here

相关问题