Is there any way to make a video in <video> tag mobile responsive ?

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

CodePudding user response：

Please check, I have did Video responsive in following ways.

1st Option You can use media Queries

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

2nd Option set width: 100% instead of 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

3rd Option Add wrapper for video tag and handle the responsive

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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The most easiest way is to give your video width as a percentage. This means the width of the video will be the % of the container it is in.

Please check the code below. (I have used a division instead of a video)

<div>12345</div>

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

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you want dfferent css properties at different width o the body then you should use the @media query. Check this for more on @media queries. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp