Question

我已将视频嵌入到我的页面中，我需要使视频适合图像中的下方白色区域。这是页面滚动之前的区域。滚动页面时，下面的内容应该正常显示。我的意思是这个视频不是全屏。但它应该在滚动之前适合视口。下面是我需要填充视频的白色区域。它也应该从顶部栏开始。并且在提供社交媒体链接的顶部栏上保持透明。下面是图片。

以下是我现在的视频html代码。

<video  autoplay="autoplay" loop="loop" id="bgvid" >
            <source src="http://www.icins.co.uk/wp-content/uploads/2015/09/SLIDE-SHOW-NEW.mp4" type="video/mp4" /> 
</video>

我试过这个CSS。但它填满了整个视图端口，顶部栏根本不可见。它被视频覆盖。

#video-landing {
width: auto; /* actually wider than viewport */
height: auto;
color: white;
background-size: cover;

}

#video-landing video {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top: -200px; 
  bottom: 0;
  right: 0;
  left: 0; width: 100px; height: 891px; transform: matrix(1, 0, 0, 1, 0, 0);

}

此外，我不能像我在代码中那样对“顶部”元素进行硬编码，因为它可能会影响不同的屏幕分辨率。任何帮助都非常感谢，因为我是html和css的新手。

这是我在下面尝试过bassie的答案后得到的结果。

Answer 1

您可以尝试在顶部栏上设置z-index属性，使其高于视频的属性。

或者，您应该可以将视频的高度设置为vh，然后在页面加载时使用一些jquery height = height - heightOfTopBar

<强>更新

视频，在div中：

    <div class="header">
    </div>

    <div class="fullscreen-bg">   
        <video loop muted autoplay class="fullscreen-bg__video">
            <source src="http://www.icins.co.uk/wp-content/uploads/2015/09/SLIDE-SHOW-NEW.mp4" type="video/mp4">
        </video> 
    </div>

的CSS：

      .fullscreen-bg {

          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: hidden;
          z-index: -100;


          position:relative;
          height:100vh;     
        }

      .fullscreen-bg__video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

        @media (min-aspect-ratio: 16/9) {
          .fullscreen-bg__video {
            height: 300%;
            top: -100%;
          }
        }

        @media (max-aspect-ratio: 16/9) {
          .fullscreen-bg__video {
            width: 300%;
            left: -100%;
          }
        }
      .header {
          position: absolute;
        width: 100%;
          height: 200px;
          background: yellow;
      }

Answer 2

#video-landing video有top: -200px;

将视频向上移动（超出容器顶部）。如果你想进一步向下移动，请使用正值。

此外，将宽度和高度设置为100％可能会导致错误的比例。试试width: 100%和height: auto

在滚动页面之前，如何使视频适合视口的大小？

2 个答案: