Tag video, HTML5, 100% width and controlled height

Asked

Viewed 5,089 times

1

I made the full screen video 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 high 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 100% wide by putting the height I want? And if you have any way to do that, when the person’s monitor is smaller as for example 1024x768 the video will maintain height or will adapt?

html5 height

  • Oiii, you want to keep 100% wide and put 400px high ? That’s it ?

  • Yes, I will explain why at home I needed to make a full Scream video and it was very easy, only in the internal I need to do as if it were a banner 100% wide only with 400px height. But it’s like me the video only gets 400px high when I take the 100% tended width?

  • Dude, I meant, just change the id css "#videhome", you add the "max-width: 400px;"

  • I think you mean max-height right? I put here max-height the video gets 400 high but automatically the width of it goes to 713px and even if I put max-with:100% ! Important; does not work, you can do this with javascript?

2 answers

2

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

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

0

<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 believe this will solve your problems for more information access this link here

Browser other questions tagged html5 height

You are not signed in. Login or sign up in order to post.