Demi-Image background
Résolu
RCoder974
-
RCoder974 -
RCoder974 -
Bonsoir,
J'aimerai avoir une information au sujet de mon CSS ! J'aimerai avoir une vidéo en arrière plan qui tourne en boucle mais qui fait le demi du site (sans déformation).
Voici mon CSS actuel pour la vidéo :
.VideoIndex {
position: fixed;
z-index: -1;
}
video {
width: 500px;
height: 10px;
display: block;
margin: 0 auto;
background-size: cover;
transform: scale(120,54.6)
}
Dans une balise <style> de la balise <head>
J'aimerai avoir une information au sujet de mon CSS ! J'aimerai avoir une vidéo en arrière plan qui tourne en boucle mais qui fait le demi du site (sans déformation).
Voici mon CSS actuel pour la vidéo :
.VideoIndex {
position: fixed;
z-index: -1;
}
video {
width: 500px;
height: 10px;
display: block;
margin: 0 auto;
background-size: cover;
transform: scale(120,54.6)
}
Dans une balise <style> de la balise <head>
1 réponse
-
Bonjour,
Une solution possible est d'inclure l'élément video dans un autre élément html sur lequel on peut appliquer les propriétés overflow: hidden; et width: 50%; pour n'afficher que la moitié de la vidéo.
<!-- html --> <div class="video-crop50"> <video src="video.mp4" autoplay muted loop></video> </div> <p>Lorem ipsum</p>
/* css */ .video-crop50 { position: fixed; top: 0; left: 0; overflow: hidden; width: 50%; height: 100vh; z-index: -1; } .video-crop50 video { min-width: 100vw; min-height: 100vh; }
Démo : https://jsfiddle.net/Lu92dsc4/
