There is such a page structure: enter image description here

Need to adapt to 3 screen resolutions: 1920x1080 and 2160x1440 and 2736x1574 The problem is that the video needs to be stretched to the maximum width and height, but leave space under the menu, which means -250px. Also, video can be randomly resolved, so if you stretch it and it turns out “not nice” it doesn't matter. Just to stretch :)

Here is the link . Thank.

  • one
    height:calc(100% - 250px); developer.mozilla.org/en/docs/Web/CSS/calc - Igor
  • @Igor in general, here is the link atomr-web.imtqy.com/isuzu . Applied the proposed rule for css - not exactly what you need. It is necessary that the video is fully stretched to the width and fell under the "HOME". Tell me , please - Atomrr
  • @atomrr where should the place stay under the menu? Removing height: calc (100% - 250px); at you it stretches on width and height. - Anthony_L
  • @Anthony_L look, please, here is the link atomr-web.imtqy.com/isuzu - Atomrr

3 answers 3

 video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto; } #myVideo { width: 2000px; min-width: 720px; height: auto; min-height: 350px; /* background: url(../images/video-bg.png) center no-repeat; */ -webkit-background-size: cover; background-size: cover; object-fit: cover; z-index: 3; } #section0 { position: relative; overflow: hidden; display: block; } @media only screen and (min-width: 770px) { #section0 { position: relative; overflow: hidden; max-height: 350px !important; min-height: 350px; height: 100% !important; display: block; } } #section0 .layer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; width: 100%; height: 100%; background: rgba(0,0,0,.34); text-align: center; } .wrap_video { position: absolute; top: 50%; left: 0; right: 0; bottom: 0; } .site__title { display: block; line-height: .8; font-size: 48px; margin: 0; margin-bottom: 12px; color: #fff; font-family: serif; } 
 <!-- Background video section : Start --> <div class="custom-video section" data-section="about"> <div class="video_section" id="section0"> <video autoplay loop muted id="myVideo"> <source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.mp4" type="video/mp4"> <source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.webm" type="video/webm"> </video> <div class="layer"> <div class="wrap wrap_video"> <h1 class="site__title">Section Title </h1> </div> </div> </div> </div> </div><!-- Background video section : End -->

  • one
    Thank you very much for the answer. - Atomrr

 body{ margin: 0; } .menu{ background-color: gray; height: 250px; } .video{ width: 100%; height: calc(100vh - 250px); } 
 <div class="menu"> 250px </div> <iframe src="https://www.youtube.com/embed/w6DW4i-mfbA" frameborder="0" allowfullscreen class="video"></iframe>

If you need an implementation specifically for your case, use

.video-container {overflow: hidden; }

#video {min-width: 100%; min-height: 100%; }

  • The video will be used locally and with calc I tried. It did not work out, unfortunately. Filled in gp, take a look, please. atomr-web.imtqy.com/isuzu - Atomrr
  • @Atomrr, note: #video {min-width: 100%; min-height: 100%; } - Sergey Tretyak
 video { width: 100%; height: auto; }