How to make my video responsive in website ? [html]

Question

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>

Refer this Question, I hope this question will giv some idea to you https://stackoverflow.com/questions/19796799/fully-responsive-html5-video — Katheer, Nov 07 '21 at 07:18

score 1 · Answer 1 · answered Nov 07 '21 at 07:32

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>

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>

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>

score 0 · Answer 2 · answered Nov 07 '21 at 08:01

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>

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

How to make my video responsive in website ? [html]

2 Answers2