Sujet Précédent Sujet Suivant

Demi-Image background

Résolu/Fermé
RCoder974 - Modifié le 11 déc. 2021 à 12:52
 RCoder974 - 12 déc. 2021 à 11:46
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>
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
11 déc. 2021 à 14:02
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/
1
RCoder974
12 déc. 2021 à 11:46
Nickel, ca marche ! :)

Merci Pitet !
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses