materializecss - 背景视频

Question

我希望视频只在 div "index -banner " 中播放，但它一直在整页播放，直到您到达页脚。我已经尝试了一切都没有成功。

<!-- 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 框架配合使用

materializecss - 背景视频

materializecss - video in the background

html

css

video

materialize