我正在使用bootstrapmPurpose-master
主题。在这一部分中,有一个特性可以将3个块放在一行中,并且它是完全响应的。
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
DATA ONE
</div>
<div class="col-md-4 col-sm-6">
DATA TWO
</div>
<div class="col-md-4 col-sm-6>
DATA THREE
</div>
</div>
</div>
</div>
我希望修改此部分,并将视频放在屏幕/行的中间,同时使其响应。为此,我尝试了以下代码。我将第一个和第三个div留空,并将视频放在第二个div中。
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
<video controls autoplay height="340" width="267" >
<source src="<? echo $video_link;?>" type="video/mp4">
</video>
</div>
<div class="col-md-4 col-sm-6>
</div>
</div>
</div>
</div>
它工作正常,但问题是,如果我更改视频的高度和宽度,它将停止响应。
我尝试的第二种方法是:
<div class="container">
<div class="row">
<div class="col-md-6">
<video controls autoplay >
<source src="<? echo $video_link;?>" type="video/mp4">
</video>
</div>
</div>
</div>
但是它把视频放在左边,而且也不能使它响应
目前视频的高度和宽度都太小了。我想要三样东西。
1)将视频大小增加到640*360。
2)把它放在屏幕中央。
3)使其响应。
最佳答案
如果这一行中唯一想要的是视频,那么就不必使用列。如果应用以下CSS,则应使视频居中并响应:
#video-containing-div video {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
现在,硬编码宽度和高度到您的HTML将取消视频的“响应”。另外,我可能漏掉了一些东西,但如果你试图增加视频的大小与风格,你只会炸掉它,并失去图像质量。要增加视频的大小,您需要以更高的分辨率拍摄它。