CODEWITHSUNDEEP
htmlcssvideoresponsive-design
Nikoloz Tukhashvili
Nikoloz Tukhashvili

Reputation: 65

How to make responsive video in html?

So I searched up how to make a video responsive in html with css but it doesn't work. please help

this is my HTML

<div class="container">
   <video width="540px" height="320px" controls src="Videos/Video.mp4"></video>
</div>

and this is css

.container {
  width: 100%;
}
video {
  height: auto !important;
  width: 100% !important;
}

Upvotes: 0

Views: 2590

Answers (1)

Johannes
Johannes

Reputation: 67768

I would erase the width and height attributes from the video tag and (if the video isn't larger than specified by those attribute values) introduce a max-width setting in the CSS rule:

<div class="container">
   <video controls src="Videos/Video.mp4"></video>
</div>



.container {
  width: 100%;
}
video {
  height: auto;
  width: 100%;
  max-width: 540px;
}

This will make the video either 540px wide if the container is >= than 540px, and make it full width when the container is less than 540px wide. Height will be auto according to the proportions in both cases.

In any case, if your video is larger than specified, you should use the original size width as the value for the max-width in the CSS. That way the CSS will allow a size up to original size (but not larger, which would cause bad quality)

Upvotes: 3

Related Questions