vidéo avec couverture de l'objet débordant du conteneur

Je construis un site Web qui a une vidéo splash en plein écran en haut,
Pour rendre la vidéo bien sur tous les écrans, j'utilise une couverture d'ajustement d'objet.

Comme vous pouvez le voir dans this plunker l'élément vidéo déborde de son conteneur sur l'élément suivant.
Pour voir ce comportement, redimensionnez la fenêtre d'aperçu à un format boîte aux lettres très étroit, puis regardez le bord inférieur de l'élément vidéo, vous remarquerez que la vidéo continue là où le conteneur s'est arrêté.

vidéo avec couverture de l'objet débordant du conteneur

Comment puis-je contraindre la vidéo dans son conteneur ou masquer le débordement?

<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>

Source

2017-10-10 dennismuys

Ajouter à votre overflow:hiddensplash-container.

Source

2017-10-10 21:47:54 Tom

merci Tom, j'avais déjà essayé ça sans succès. mais maintenant j'ai remarqué mon fichier css caché soo yep .. Je suis un idiot – dennismuys

nous sommes tous des idiots parfois ... – Tom

vidéo avec couverture de l'objet débordant du conteneur

Répondre

Questions connexes