Video Tag, HTML5, 100% width and controlled height

Question

Video Tag, HTML5, 100% width and controlled height

I made the video full screen at home only now I need to use the video with the same width of 100% only with the minimum height of 400px, but the video only gets 400px height when I remove the 100% width:

<!doctype html>
<html lang="pt-br">
<meta http-equiv="refresh" />
<head>
<style>
*{ margin:0; padding:0; border:0; }
HTML ,BODY{ height:100%; margin:0; padding:0; border:0; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -ms-webkit-font-smoothing: antialiased;}
BODY{ text-align:left; }
#site{ width:100%; min-height:100%; position:relative; }
#site #videhome{ position:fixed; right:0; bottom:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-100; background-size:contain; }
</style>
</head>

<body>
<div id="site"> 
<video autoplay loop id="videhome">
    <source src="video/Falling.Skies.S04E07.HDTV.x264-KILLERS.mp4" type="video/mp4">
</video>
</div>
</body>
</html>

How do I make the video keep the 100% width by putting the height i want? And if you have any way to do this, when the person's monitor is smaller as for example 1024x768 the video will keep the height or will adapt?

1

html5 height

Author: brasofilo, 2014-08-07

Source

2 answers

score 2 · Answer 1

The 100% size only works if all your parents are also at 100% in css you will need this tb for html and body:

html{width: 100%}
body{width: 100%}
#site{width: 100%}
#videhome{height: 400pt, width: 100%}

score 0 · Answer 2

<div id="video-bg">
  <video autoplay muted>
    <!-- Default video source: -->
    <source type="video/mp4" src="video/myvid.mp4"
            media="(orientation:landscape)">

  </video>
</div>


#video-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
#video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
  #video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  #video-bg > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

I think this will solve your problems for more information go to this link here