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?

  • 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

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