如何让我的视频在网站上响应？ [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