1

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?

Osman
  • 1,270
  • 2
  • 16
  • 40
stoksi
  • 25
  • 4
  • `max-height: 100vh` ? – Dominik Matis Jan 02 '20 at 19:21
  • @DominikMatis I try this, but then my video in not full width, height is ok, but width is not – stoksi Jan 02 '20 at 19:24
  • height: 100vh; width: 100vw; – Vivek Raju Jan 02 '20 at 19:25
  • Does this answer your question? [Video 100% width and height](https://stackoverflow.com/questions/20127763/video-100-width-and-height) – Dominik Matis Jan 02 '20 at 19:26
  • why do you make the container class and put the video inside, It's solve your height width problem. And also it's responsive too – Vivek Raju Jan 02 '20 at 19:28
  • 2
    width + height and also https://drafts.csswg.org/css-images-3/#propdef-object-fit can help you. the screen will not shrink or expand to the video ratio , you have to clip it or reduce its width or height to fit inside the area you want to see at screen. – G-Cyrillus Jan 02 '20 at 19:43

2 Answers2

0

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>
Danziger
  • 19,628
  • 4
  • 53
  • 83
0

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.

Kumar Gaurav
  • 738
  • 4
  • 11