materializecss - Video im Hintergrund

Question

Ich möchte, dass das Video nur in div "index -banner" abgespielt wird, aber es wird auf der ganzen Seite abgespielt, bis du die Fußzeile erreichst. Bereits habe ich alles ohne Erfolg versucht.

Beispiel: 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> 

-Code 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

Sie haben

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

Warum nicht einfach all das auf

width: 100%; 
height: 100%; 

?

Answer 2

nur das Attribut CSS ändern

position: fixed; 

zu

position: absolute; 

Sollte mit Materilizecss Rahmen schön arbeiten