1487 sujets

Web Mobile et responsive web design

Bonjour à tous et d'avance merci de votre aide.
La vidéo de mon site ne s'adapte pas aux téléphones portable (Android et/ou Apple).
Le site http://www.pic-et-coud.fr


/* Page Vidéo */

#background-video {
	height: 100vh;
	width: 100vw;
	aspect-ratio: 16/9;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


D'avance merci de votre aide.
Cordialement.
Administrateur
Hello, et tous mes voeux pour cette nouvelle année.

Le problème dans les styles de tes vidéos est qu'il y a une contradiction dans cette partie :

#background-video {
  height: 100vh;
  width: 100vw;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}


Le problème est que width/height sont contradictoires avec aspect-ratio.

Tu peux régler le souci d'au-moins deux manières :
- supprimer la height imposée
- modifier la valeur de object-fit par "contain" qui forcera la vidéo à toujours être entièrement visible sans débordements
Modifié par Raphael (03 Jan 2025 - 15:14)
Merci Raphael, tous mes bons voeux pour cette année 2025.
Avec les modifications la vidéo ne s'adapte toujours pas au téléphones portables

       #background-video {
	width: 100vw;
	aspect-ratio: 16/9;
	object-fit: contain;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


site: https://www.pic-et-coud.fr, sur les PC impeccable.


#background-video {
	height: 100vh;
	width: 100vw;
	object-fit: contain;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


Merci Raphael, avec cette solution c'est mieux.
Modifié par BruChri (03 Jan 2025 - 15:43)