html 5 video full width with special height

Question

I am trying to get an video on the startpage which is full width but not full height but it just does not work. It always scales down if I set the height.

#video_startpage {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1000;
    min-width:100%;
    max-height:400px;
}

fiddle: https://jsfiddle.net/Lxz43sga/#&togetherjs=yrnrdNEaIu

I just noticed that when checking the fiddle, I think the `video` element resizes accordingly with a 16:9 aspect ratio — SidOfc, Feb 13 '16 at 20:25
Maybe this answer can help you out on keeping the container the right width to contain a 400px height video: http://stackoverflow.com/a/12121309/2224331 — SidOfc, Feb 13 '16 at 20:28
If you click the white area on the sides of the video, you see that `video` element has actually 100% width but video itself does not fit to it so what you want is I dont think possible — Batu.Khan, Feb 13 '16 at 20:40

score 0 · Answer 1 · answered Feb 13 '16 at 21:06

Ended up using this! Works like charm.

<div id="videoarea">

<video width="100%" height="auto" autoplay loop id="video_startpage" >
  <source src="demo3.mp4" type="video/mp4">

</video>



#videoarea {
height:70%;
width:100%;
overflow:hidden;
}

#video_startpage {
z-index:-9999}

html 5 video full width with special height

1 Answers1