我正在使用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将取消视频的“响应”。另外,我可能漏掉了一些东西,但如果你试图增加视频的大小与风格,你只会炸掉它,并失去图像质量。要增加视频的大小,您需要以更高的分辨率拍摄它。

10-05 20:28
查看更多