1487 sujets

Web Mobile et responsive web design

Adapter une vidéo sur PC et Téléphone portable

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)
Bonjour, je me permet une remarque , les vidéastes PRO, regardent toujours leurs vidéos comme au cinéma, donc horizontalement !
Alors en faisant cela c'est n'importé quoi chez moi !
Alors j'ais regardé ton code de plus prêt, comment veux-tu avoir UNE seule page responsive avec l'imbrication de tes balises et tes 20 ou plus CSS ??

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<title>Mercerie Buchy Rouen - Tricot et Couture | Pic & Coud 2.0 | laine à tricoter | Bergère de France</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta charset="UTF-8">
	<meta name="google-site-verification" content="37hkIAb74-6Bed7KrJf6oTDzHXzGaEUEf6qcZQAX7L8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="robots" content="index" />
	<meta name="robots" content="index,follow" />
	<meta name="robots" content="follow" />
	<meta name=”description” content=” grand choix pour la Couture Broderie Laine Mercerie retouche à buchy près de Rouen Pic Coud 2 0 christelle hague réalise des créations textile Tricots ” />
	<link rel="canonical" href="https//www.pic-et-coud.fr" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<!-- favicon -->
	<link rel="shortcut icon" href="favicon.ico">
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:500|Source+Code+Pro:300,400,600,700" rel="stylesheet">
	<!-- bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- animate.css -->
	<link rel="stylesheet" href="css/animate.min.css">
	<!-- slider and carousel -->
	<link rel="stylesheet" href="css/owlcarousel/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owlcarousel/owl.theme.default.min.css">
	<link rel="stylesheet" href="css/slick.css">
	<!-- popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">
	<!-- icons set -->
	<link rel="stylesheet" href="css/fontello.css">
	<!-- custom main stylesheet -->
	<link rel="stylesheet" href="css/styles.css">

	<!-- CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
	<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
	<link href="css/animate.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/owl.carousel.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet" type="text/css" />

Je comprends que c'est ton environnement , mais alors je n'est aucune aide à t'apporter.
Pour étre franc, c'est du beau travail de maitriser cette complexité, et tu as l'air de bien maîtriser ! Chapeau.
Prévenir un modérateur
Répondre au sujet
Aller à