視頻與物體適合的蓋子溢出容器

我正在建立一個網站，在頂部有全屏幕飛濺視頻，
爲了使視頻在所有屏幕上看起來不錯，我使用了物體貼合封面。

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

視頻與物體適合的蓋子溢出容器

回答

相關問題