如何使用 html 中的视频标记使视频响应式

Question

我想让视频在html中响应。为此，我正在使用视频标签。以下是我尝试过的代码。

<video controls autoplay="true" loop class="video_travel">
    <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.ogv" type="video/ogg">
</video>

现在，当我打开包含手机视频的网站时，我得到的是会有一个播放按钮，但无法播放任何内容。请帮忙..

Answer 1

使用 css 属性-

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

Answer 2

您可以使用

下面的"max-width：100%"检查片段。

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

<video controls autoplay loop class="video_travel">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"  />
</video>

Answer 3

你试过这个吗

 video {
  width: 100%    !important;
  height: auto   !important;
}