Question

我正在建立一个顶部有全屏启动视频的网站，
为了使视频在所有屏幕上看起来都很好，我使用了物体贴合的盖子
正如您在this plunker中看到的那样，视频元素从其容器溢出到下一个元素上要查看此行为，请将预览窗口缩小到非常窄的信箱格式，然后查看视频元素的下边缘，您会注意到视频会在容器停止的位置继续。

如何将视频限制在容器中或隐藏溢出？

<body>
<div class="splash-container">

  <h1 class="splash-title underline">title</h1>

  <div class="splash-scroll-indicator">
    <a scrollTo class="underline" href="#intro">proceed</a>
    <br><i class="icofont icofont-curved-down"></i>
  </div>

  <div class="splash-overlay"></div>

  <video class="video-src" autoplay loop muted>
    <source src="//s3.eu-central-1.amazonaws.com/evanzummeren.com/rijksmuseum.mp4" type="video/mp4">
    video tag is not supported in this browser
  </video>
</div>
<div class="container" id="intro">
  <div class="row text-center intro">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem magna, tincidunt fermentum quam in,<br> imperdiet varius quam. Nulla facilisi. Integer efficitur congue semper. Nunc a mauris sed tortor aliquam porttitor. Sed varius purus et magna vulputate facilisis. In a feugiat nisi. Sed venenatis libero sed lectus fringilla, vitae aliquet sapien semper. Mauris nisl sapien, dictum ac laoreet eu, vestibulum vitae ante. Nam maximus laoreet lectus vitae pretium. Integer eu orci tincidunt, sagittis leo congue,<br> auctor nisi. Suspendisse ut tortor ac mi varius rutrum eu ut orci. Aenean imperdiet lectus ante.<br>
      <br><br>Nullam feugiat vel nibh sed aliquet. Fusce sit amet eros id mauris consectetur interdum. <br>Curabitur pretium lectus non nisl pretium facilisis. Pellentesque id ultrices est. Mauris non lacinia elit.
    </p>
  </div>
</div>

Answer 1

将overflow:hidden添加到您的splash-container。

带有物体贴合盖的视频溢出容器

1 个答案: