Background Video With 100% Width And Fixed Height

I need to run a video in the background. Requirements are that the video will have to run on 100% width and 600px height/max-height. Here is what i tried to do. https://jsfiddle.ne

Solution 1:

After understanding what you are trying to achieve...

You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.

#video-bg {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}
video {
  display: block;
}
.video-container {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -100;
}

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]--><divclass="video-container"><videoautoplayloopmutedid="video-bg"><sourcesrc="http://demosthenes.info/assets/videos/polina.mp4"type="video/mp4" /></video></div>

The problem with your current code or any answers till now is that it won't maintain the height: 600px because the video will always maintain his aspect-ratio.

So, you add a parent div with width: 100% and a max-height:600px with overflow:hidden. This way if the video gets a bigger height it will be hidden by the parent div.

This is probably the best way to achieve what you want, but keep in mind it will hide some parts of the video.

Solution 2:

Here is your updated code at jsfiddle

Please note that I changed min-height: 100%; to min-height: 600px; and added top: 0;

#video-bg {
position: fixed;
top: 0;
right: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 600px;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}