上部にフルスクリーンのスプラッシュビデオがあるWebサイトを構築しています
。すべての画面でビデオの見栄えを良くするために、オブジェクトフィットカバーを使用しています。
あなたが見ることができるように、このplunker video要素は、次の要素の上にその容器の外にこぼれ。
この動作を確認するには、プレビューウィンドウを非常に狭いレターボックス形式に縮小してから、ビデオ要素の下端を見ると、コンテナが停止した場所からビデオが続くことがわかります。
ビデオをコンテナに制限したり、オーバーフローを非表示にするにはどうすればよいですか？
<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>
に追加overflow:hiddenしますsplash-container。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加