How to make my video responsive in website ? [html] - 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>

Answer 1

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>

Answer 2

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