时间戳

首页 > 解决方案 > 在移动视图中定位视频叠加层

html - 在移动视图中定位视频叠加层

问题描述

div包括视频元素和带有棕色背景的叠加层，如下所示。我无法在 <767px 视图中定位叠加层。我尝试了 flexbox 和 flex-direction: column 但元素仍然没有响应。它的位置与大屏幕上完全相同，并且不会像在第二个屏幕上显示的那样改变。当前结果是屏幕编号。2.预期效果显示在屏幕编号中。3.

我的代码：

<div className="background-video">
  <video id="video" autoPlay="loop" muted="" loop="">
    <source src={work} type="video/mp4"></source>
  </video>
  <div className="brown-be">
   <div className="me-modal"></div>
  </div>
</div>

.background-video {
  position: relative;
  height:100%;
  width:100%;
}

#video {
  z-index: 0;
  width: 100%;
}

.brown-be {
  background-color: rgba(157,124,94,1);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 60%;
  z-index: 1;
}

@media (max-width: 767px) {
    .brown-be {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

屏幕 Nº1

屏幕 Nº1

屏幕 Nº2

屏幕 Nº2

屏幕 Nº3

屏幕 Nº3

标签： htmlcss

解决方案

推荐阅读