materializecss - 背景中的视频

问题描述：

我希望视频只能在div“index -banner”中播放，但它会以整页形式播放，直到到达页脚。我已经试过一切都没有成功。materializecss - 背景中的视频

<!-- 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%); 
}

答

你有

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

为什么不将所有的，要

width: 100%; 
height: 100%;

？

答

只是改变CSS属性

position: fixed;

到

position: absolute;

应工作很好与Materilizecss框架

materializecss - 背景中的视频

相关推荐