CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-video
stoksi
stoksi

Reputation: 25

Full width video is larger than screen size in html5

I have a video that is full width in a header, video have width set to 100%. Problem is with height, my video is big and I don’t see controls of the video. I need to scroll in order to see controls. Is there any solution to my problem?

<video  width="100%"  controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

I am trying to achieve this with height set to auto or 100% but still video on a desktop is big and I don’t see controls. Please any ideas how to solve this? Is there a way to fit video to screen size. so that I don't need to scroll?

Upvotes: 1

Views: 2079

Answers (2)

Kumar Gaurav
Kumar Gaurav

Reputation: 738

Your video has aspect ratio issue that is why, if you use 100% width, there will be a scroll bar. You can use 4:3 or 16:9 ratios for videos if fullscreen required without compromise of width and height.

Upvotes: 0

Danziger
Danziger

Reputation: 21161

You can make the video have both width: 100% and height: 100% or height: 100vh and the content (the video itself) will be resized and centred, keeping the aspect ratio, so just make sure to add a background-color to fill in the empty areas:

body {
  margin: 0;
}

.somethingElse {
  position: relative;
  width: 100%;
  height: 50vh;
  background: red;
}

video {
  position: relative;
  width: 100%;
  height: 100vh; 
  background: black;
  display: block;
  outline: none;
}
<div class="somethingElse"></div>

<video controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

<div class="somethingElse"></div>

Upvotes: 0

Related Questions