无法将视频放在 div 元素后面

Question

我正在尝试将一个小视频放在类似横幅的 div 元素后面。经过一段时间的研究，我至少设法显示了 div 的内容，但视频无处可见。如果我将它们分开放置，它们都会出现，但如果我尝试将它们堆叠在一起，它就会消失。

HTML:

<div id="castle-siege">
    <div id="cs-video">
        <video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
            <source src=/assets/img/cs.mp4" type="video/mp4">
        </video>
    </div>
    <div id="cs-table">
        //content
    </div>
</div>

CSS:

#castle-siege {
    width: 1000px;
    height: 150px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#cs-video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

#cs-table {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}

Answer 1

我认为在这种情况下，您需要设置 position 属性以及 z 索引才能正确显示视频。当然，还要确保您的视频在片场 url 中存在且正确无误！将视频的位置设置为 absolute 并将 table relative 设置为它，根据需要设置更高或更低的 z-index（如果您希望它更高）见于视频顶部）

出于演示目的，我将宽度设置为 80%，最好使用百分比/调整table 单位，而不是以像素为单位设置宽度。

希望对您有所帮助

    #castle-siege {
      width: 80%;
      height: 150px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    #cs-video {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index:0;
    }

    #cs-table {
      width: 100%;
      height: 100%;
      margin-top: 30px;
      margin-left: 50px;
      color:red;
      text-align:left;
      position: relative;
      z-index:1;
    }

<div id="castle-siege">
  <div id="cs-video">
    <video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
      <source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
    </video>
  </div>
  <div id="cs-table">
     Hi there, how's it going? There's supposed to be a table here.
  </div>
</div>

无法将视频放在 div 元素后面

Trouble placing video behind a div element

html

css

html5-video