如何让我的视频成为响应式网络

Question

如何让我的视频在我的网页上响应？

以下是代码：

<div class="container container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4 col-md-4 " style="background-color:dark;">
            <video width="800" height="450" controls>
                <source src="video/seatoskygondola.mp4" type="video/mp4">    
                <source src="movie.ogg" type="video/ogg">
                Your browser does not support the video tag.  
            </video>
        </div>
    </div>
</div>

非常感谢你！

Answer 1

请添加以下内容：

video {
    max-width: 100%;
    height: auto;
}

您还需要使图像响应，所以请尝试以下操作：

img, video {
    max-width: 100%;
    height: auto;
}

现在视频很小，但这取决于您应用于容器的样式。

Answer 2

我通过改变来解决问题：

<div class="col-sm-4 col-md-4 " style="background-color:dark;">

  

到

<div class="col-sm-6 col-md-6 " style="background-color:dark;">

您可以查看网页：

http://tsangwangwang.com/vancouverthegondolasquamish.html