Forum - En vrac ! - afficher une vidéo en iframe responsive

Bonjour    je voudrai afficher une vidéo en iframe responsive

 comment créer l'image comme ci-dessous   img/ratio640x360.gif

img/ratio640x360.gif" />

merci

Bonjour,

Personnellement, je me sers plutôt du logiciel Photofiltre Studio ou (version gratuite) Photofiltre 7 : https://www.photofiltre-studio.com/pf7.htm

D'autres logiciels (Gimp entre autres) font aussi ce travail. Mais Photofiltre est très suffisant.

Tu crées un nouveau document, dans la boite de dialogue, tu spécifies les dimensions 640 et 360.

Tu coches transparence automatique. Tu valides, puis tu enregistres simplement cette image transparente sous le nom choisi au format .gif  :  ratio640x360.gif  par exemple. Pour cette image, peu importe de choisir lors de l'enregistrement : entrelacé ou palette optimisée.

les formats .gif et .png savent gérer les transparences, mais pour cette image .gif suffit très largement...

Cordialement,

bonjour

pas de problème pour créer l'image, 

mais celle-ci ce retrouve au dessus de la vidéo qui n'est pas responsive

cordialement

Bonjour,

Pour que l'Iframe responsive fonctionne... il faut :

1) que le style correspondant soit dans styleplus.css (et dans le site indiqué... ce n'est pas le cas...)

voir le tutoriel : https://www.71site.fr/articles.php?lng=fr&pg=34&mnuid=19&tconfig=0

2) que le contenu de l'Iframe soit responsive également... bien sûr...

et que ton code soit rédigé comme dans les tutoriels (pour une vidéo embed)

<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio640x360.gif" />
<iframe allowfullscreen="" frameborder="0" height="180" src="https://www.youtube.com/embed/Nak-j7f6dfE?rel=0" width="320"></iframe>
</div>

soit un code qui pourrait ressembler à cela (pour une vidéo hébergée chez toi...)

<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio640x360.gif" />
<iframe allowfullscreen="" frameborder="0" height="180" src="file/video-camera/lego-bmx-vid.webm" type="video/webm" width="320"></iframe></div>

Cordialement,