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 ?
– Alan PS
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?
– user4451
Dude, I meant, just change the id css "#videhome", you add the "max-width: 400px;"
– Alan PS
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?
– user4451