视频与物体适合的盖子溢出容器

我正在建立一个网站，在顶部有全屏幕飞溅视频，
为了使视频在所有屏幕上看起来不错，我使用了物体贴合封面。

正如您在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>

来源

2017-10-10 dennismuys

添加overflow:hidden您splash-container。

来源

2017-10-10 21:47:54 Tom

呃汤姆谢谢你，我已经试过了，没有成功。但现在我注意到我的缓存css文件哟..我是个白痴 – dennismuys

我们都是白痴有时候...... – Tom

视频与物体适合的盖子溢出容器

回答

相关问题