Discussion :

[Jessma]

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

[stosssik]

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 —

[ABCIWEB]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Jessma]

Bonjour,

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