Video tag, HTML5, width 100% and height controlled

Question

Video tag, HTML5, width 100% and height controlled

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I made the video full screen on home only now that 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 in height when I take the 100% wide:

<!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 keep the video 100% wide by setting the height I want? And if you have any way to do that, when the person's monitor is smaller, such as 1024x768, will the video keep up or will it adapt?

html5 height

asked by anonymous 08.08.2014 / 01:27

2 answers

What is the difference between these two statements? Playing dice for a box

score 2 · Answer 1

The size of 100% only works if all your parents are also 100% in the css will need this tb for the 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 access this link here