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

【问题标题】：how to make my video become a responsive web如何让我的视频成为响应式网络
【发布时间】：2017-12-03 21:48:48
【问题描述】：

如何让我的视频成为我网页上的响应式视频？

代码如下：

<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>

非常感谢！

【问题讨论】：

不知道您将什么定义为“响应式”。
当网页大小不同时：bootstrap as col-sm-4 col-md-4 etc.全部浮动到左侧以便于查看。
感谢黑崎一护编辑我的问题。我是新来的，是我的第一次。谢谢大家。

标签： html css video bootstrap-4

【解决方案1】：

请添加以下内容：

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

您还需要使图像具有响应性，因此请尝试以下操作：

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

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

【讨论】：

谢谢。在大屏幕和中屏幕，视频变小。在小屏幕上，它适合它。仍然无法解决我的问题。需要补充更多。这是我的网站：tsangwangwang.com/vancouverthegondolasquamish.html
根据他对cmets中一个问题的回答，这根本没有回答他的问题。
不走运。我试图添加两者。但仍然没有解决我的问题。我们可以使用引导程序（ col-sm-? col-md-? ）来解决问题吗？谢谢

【解决方案2】：

我自己通过改变来解决问题：

&lt;div class="col-sm-4 col-md-4 " style="background-color:dark;"&gt;

进入

&lt;div class="col-sm-6 col-md-6 " style="background-color:dark;"&gt;

您可以查看网页：

http://tsangwangwang.com/vancouverthegondolasquamish.html

【讨论】：