28172 sujets

CSS et mise en forme, CSS3

[Résolu] Taille de vidéo

c'est ce que j'avais essayé de faire mais ça ne fait aucune différence
Je n'ai rien vu de ce genre dans l'exemple que tu donnes, les tailles sont données en pixels
Je vais tout de même essayer à nouveau dans cette direction
Modifié par PapyJP (16 Oct 2020 - 14:12)
Modérateur
Bonjour,

Il suffit via css de donner la largeur 100% à la balise video.

La technique du padding est à utiliser quand la vidéo est à l'intérieur d'une iframe (comme par exemple quand on veut utiliser une vidéo de youtube ou dailymotion). Mais quand on a la vidéo sur son propre serveur, ce n'est pas la peine.

Exemple complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vidéo</title>
<style>
div{width:300px;}
video{width:100%;}
</style>
</head>
<body>
<h1>Vidéo</h1>
<div>
<video src="uneVideo.mp4"></video>
</div>
</body>
</html>

Amicalement,
Modifié par parsimonhi (16 Oct 2020 - 14:35)
Le problème du CSS était simplement que la largeur de <video> n'était pas à 100% comme je le croyais
Oui, c’est exactement ça. J’utilise le padding pour un <iframe> contenant un YouTube, par pour <video>
Le bug c’était que le css ne mettait pas la largeur de <video> à 100% dans le contexte où de trouvait la balise.
Sujet clos
Aller à