Html 背景视频太大_Html_Css_Video_Background_Responsive

Html 背景视频太大

html css video

Html 背景视频太大,html,css,video,background,responsive,Html,Css,Video,Background,Responsive,手机截图电脑屏幕截图这是一段背景视频。这个问题。当网站全屏显示时，视频的大小会变大。我试着用页边空白使它变小。但它将视频一分为二。在全屏和小屏幕上，视频必须保持原始状态。我该怎么做 <body> <div id="videoContainer" class="half-black"> <div class="videoWrapper"> <video autoplay>

手机截图

电脑屏幕截图

这是一段背景视频。

这个问题。
当网站全屏显示时，视频的大小会变大。我试着用页边空白使它变小。但它将视频一分为二。在全屏和小屏幕上，视频必须保持原始状态。我该怎么做

<body>

    <div id="videoContainer" class="half-black">
        <div class="videoWrapper">
            <video autoplay>
                <source src="video/warwick.mp4" type="video/mp4">
            </video>
        </div>
    </div>
    <div id="infoContainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    </div>

您可以使用

objectfit

CSS属性将视频放入其容器中。使用并查看这是否解决了您的问题。此外，不需要保证金性质

.videoWrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

您可以使用

objectfit

CSS属性将视频放入其容器中。使用并查看这是否解决了您的问题。此外，不需要保证金性质

.videoWrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

tnx兄弟，这很有帮助！tnx兄弟，这很有帮助！