html - 如何使我的视频成为响应式网络

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

现在视频小了，但是要看你给容器应用的样式。