отзывчивый полный экран html5 видео

Question

Я хочу сделать полноэкранный отзывчивый баннер, например https://yourkarma.com/. Я делаю то же самое ... но проблема в том, что когда я проверил в мобильном и табу просмотре видео высоту, чтобы уменьшить. Сделал некоторые изменения в моем CSS, тогда я получаю результат, но потерял большую часть видео в мобильном и в виде табуляции , как я могу достичь того, что похоже на мой ссылочный сайт?

CSS

---

.main_banner{ 
    width:100%; 
    top:0px; 
    height:100%; 
    float:left; 
    position:absolute; 
    left:0; 
    overflow:hidden; 
    background-color:#141517; 
} 
.main_banner video{ 
    width:auto; 
} 

HTML

<section class="main_banner"> 
     <video autoplay loop preload> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_MP4.mp4" type="video/mp4"> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_Ogv.ogv" type="video/ogg"> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_Webm.webm" type="video/webm"> 
      Your browser does not support the video tag. 
     </video> 
    </section> 

Answer 1

Я думаю, вы должны оставить из height:100%. Если вы хотите, чтобы он был отзывчивым и использовал всю высоту экрана, используйте top:0; bottom:0. Для этого требуется положение: абсолютное или относительное iirc.

Надеюсь, это поможет.