Intégration d'une vidéo responsive dans un document HTML

Bonjour à tous,

J'ai besoin d'aide ! Je dois intégrer une vidéo dans un html. Elle doit être responsive et doit pouvoir se lire sur tous les navigateurs et boîtes mail possibles.
Le hic, je ne suis pas développeur et mes compétences en html et css sont très limitées.

Sauvez-moi !
Merci beaucoup

Pour integrer une video en HTML utilise la balise <video>. Il y a des attributs à ajouter en fonction de. tes besoins.

Pour que l'affichage soit responsive, il faut que tu définisses ce que tu veux (exemple : elle peut toujours occuper la totalité d'un espace ou toujours être entièrement visible dans cet espace ?). Il faudra utiliser du CSS avec des media-queries pour faire ça.

Mais si tu n'as jamais fait de code, ca peut te prendre des jours.

---

Stosssik — Buddyweb —

Bonjour,

Une solution est d'envelopper la source iframe avec un div (ici ayant la classe "video-conteneur") que tu formates avec une hauteur de 0 et avec un padding-bottom qui correspond au pourcentage du rapport hauteur/largeur de ta vidéo, soit 56.25% pour une vidéo 16/9. Ce rapport peut-être un peu supérieur si la vidéo a une barre inférieure de menu.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.video-conteneur { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }   .video-conteneur iframe, .video-conteneur object, .video-conteneur embed { position:absolute; top:0; left:0; width:100%; height:100%; }

---

Code:

---

<div class="video-conteneur"><iframe src=...></iframe></div>

---

Bonjour,

Merci pour vos réponses.
Bonne journée à vous