1485 sujets

Web Mobile et responsive web design

Vidéo « pleine page »

Bonjour à tous ! Smiley smile

Je fait appel à vous pour une petite question qui va peut-être vous paraître très simple : je fait actuellement des pages web qui ne vont être lues que sur mobiles (car accessibles via des QR Codes). Ces pages pages ne contiennent qu'une vidéo, que je voulais afficher directement en plein écran mais j'ai lu ici et là que ce n'était pas possible (sauf via js), donc j'aimerais les mettre en « pleine page », c'est-à-dire en taille maximale (mais toujours homothétique).

Mes tests fonctionnent sur les navigateurs classiques mais sur mobile le viewport ne semble pas pris en compte (la page est toute petite à l'écran. Voici mon code :
…
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

<video controls preload="auto" autoplay="true" poster="posters/image.jpg" src="videos/animation.mp4">Vidéo</video>

</body>
…


video {
  max-width: 100%;
  height: auto;
}


Avez-vous une idée de la où ça coince ? Smiley langue

Merci pour vos lumières, et pour ce site qui est une vraie mine d'informations ! Smiley ravi
Modérateur
Bonjour,
C'est peut-être bête ce que je dis (je n'ai encore jamais travaillé avec la balise video). Mais je suppose que le comportement ressemble à celui d'une img ou autre balise de type inline.
Et si j'applique tes styles sur une img (de taille résonable), jamais elle ne prendra toute la taille...
Non ce n'est pas bête : je viens de tester la même chose avec une image et en effet, elle ne s'agrandit pas automatiquement (par contre si elle est trop grande elle s'adapte).

En mettant min-width:100% par contre cela marche bien… mais que pour l'image, pas pour la vidéo ! Smiley decu
Modérateur
ça devrait fonctionner en ajoutant : 
display: block;
min-width: 100% !important;
height: auto !important;

J'ai ajouté des !important au cas ou tu aurais défini une taille dans l'HTML.
Merci, je vais essayer ça ! Smiley murf

J'avais fait un essai quasi-concluant avec la taille définie dans le html et juste "max-width: 100%" dans le CSS pour réduire la taille au cas où cela dépasserait. Mais j'avais un léger bug d'affichage…
Ça ne marche pas avec 
display: block;
min-width: 100% !important;
height: auto !important;


mais par contre en mettant tout simplement 
max-height: 100%;
	max-width: 100%;

et en renseignant la taille de la vidéo dans le html ça à l'air de fonctionner. Il faut encore que je teste sur mobile Android…

Merci pour le coup de main Smiley smile
Sujet clos
Aller à