如何使我的视频在网站中响应？ [html]

Question

有什么方法可以在

<video>

标签移动响应中制作视频吗？

<video autoplay muted loop id="myVideo">
  <source src="rick.mp4" type="video/mp4">
</video>

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
</style>

Answer 1

请检查，我已经通过以下方式进行了视频响应。

第一个选项您可以使用媒体查询

<video autoplay muted loop id="myVideo">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  </video>

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  max-height: 100%;
}

@media(max-width: 640px){
  #myVideo {
    width: 100%;
  }
}
</style>

第二个选项 设置

width: 100%

而不是

min-width: 100%

  <video autoplay muted loop id="myVideo">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  </video>

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 100%;
}
</style>

第三个选项为视频标签添加包装器并处理响应式

<div class="video-Wrapper">
  <video autoplay muted loop id="myVideo">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  </video>
</div>

<style>
.video-Wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
}

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 100%;
}
</style>

Answer 2

最简单的方法是以百分比形式给出视频宽度。这意味着视频的宽度将是其所在容器的百分比。

请检查下面的代码。 （我用了分割而不是视频）

<div>12345</div>

<style>
div{
  width:80%;
  height:300px;
  background:#dadada;
}
</style>

如果您希望主体的不同宽度具有不同的 css 属性，那么您应该使用

@media

查询。检查此以了解有关

@media

查询的更多信息。 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

这个视频占据了整个页面。除了视频之外什么也看不到。 出去玩静音是不行的。 事实上，根本没有声音。

<div class="video-Wrapper">
  <video autoplay muted loop id="myVideo">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
  </video>
</div>

<style>
.video-Wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
}

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 100%;
}
</style>