从一个网站主题来看,我有以下内容可以截断我的视频的顶部。我希望能够调整视频的大小,即使这意味着不要在整个屏幕上伸展-
<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="#"> </a><a class="fa fa-pause" id="video-play" href="#"> </a></div>
</div>
</div>
<div class="titan-caption">
<div class="caption-content">
<div class="font-alt mb-30 titan-title-size-1">Hello & 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。因此比例无法正常工作,视频被截断。因此,我想调整大小。
希望如此,感谢您的帮助。如有任何疑问或不清楚的地方,请通知我。