materializecss - видео в фоновом режиме

Question

Я хочу, чтобы видео воспроизводилось только в div «index -banner», но оно воспроизводится на полной странице, пока вы не достигнете нижнего колонтитула. Я уже пробовал все без успеха.

Пример: background

<!-- Video --> 
    <div class="section no-pad-bot" id="index-banner"> 
    <div class="container"> 

     <div class="col s12 m4"> 
      <div class="icon-block"> 
      <h2 class="center light-blue-text"><i class="material-icons">group</i></h2> 
      <h5 class="center">User Experience Focused</h5> 

      <p class="light">Text</p> 
      </div> 
     </div> 

     <video autoplay loop id="bgvid"> 
      <source src="video/fundo.webm" type="video/webm"> 
      <source src="video/fundo.mp4" type="video/mp4"> 
     </video> 

    </div> 
    </div> 

код CSS:

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
} 

Answer 1

Вы

min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 

Почему не просто установить все, что

width: 100%; 
height: 100%; 

?

Answer 2

просто изменить атрибут CSS

position: fixed; 

в

position: absolute; 

Должно работать хорошо с каркасом Materilizecss