J’ai récemment rencontré un petit problème dans de l’ajout de vidéos « produit » dans un des mes sites Magento… Etant entrain de développer un site « fully responsive », j’ai eu besoin que les vidéos Youtube s’adaptent à la taille du browser ou de l’appareil (iphone, ipad, mini PC, etc.).
Le code standard fourni par Youtube et Vimeo lors de l’export de vidéos est malheureusement en largeur fixe :-/
Pour éviter de casser tout votre design, voici la solution:
Il vous faudra simplement envelopper le code EMBED youtube dans un DIV et lui spécifier 50 à 60% de padding bottom. Ensuite, spécifier aux éléments enfants (IFRAME et OBJECT EMBED) une largeur et une hauteur de 100% en position absolue. Cela aura pour effet de forcer les éléments à s’étendre automatiquement à pleine largeur du DIV parent.
CSS
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<iframe src= »http://www.youtube.com/embed/WsNw1CU7″ frameborder= »0″ width= »560″ height= »315″></iframe>
</div>
Un exemple « online » sera très prochainement disponible sur www.stand-direct.com
N’hésitez pas à me dire si cette méthode n’a pas fonctionné pour vous!
Merci pour l’information, c’est génial moi qui ne suis pas trop technique ça pourras m’aider.
Merci pour cette astuces, franchement je suis sauvé pour plusieurs articles.
A bientôt sur votre blog!
Merci beaucoup
Cela fonctionne nickel-chrome… Avec un joli effet CSS sur une div enveloppante, l’insertion de la vidéo a tout de suite de la gueule.
Heureux de voir que cette astuce t’as été utile 😉
Déjà qu’il est difficile d’adapter un site en responsive alors les vidéos… Je n’avais même pas encore songé au problème. Je garde ce code au chaud précieusement !
Il semblerait que ça ne fonctionne pas sous safari …
je retire se que j’ai dis … shame on me !
Je suis en train de refaire entièrement mon forum pour qu’il soit responsive parfaitement !
Ton astuce est juste géniale ! Les vidéos « collent » parfaitement dans toutes les situations, vraiment parfait !
Merci beaucoup 😉
Merci pour le partage ! Très content d’avoir trouvé ton astuce, elle m’a fait gagner bien du temps
Bonjour,
Ce script fonctionne prafaitement SAUF pour faire apparaître les paragraphes liés à la vidéo. Dans viméo, on peut choisir de partager également titre, auteur, byline… enfin des lignes de paragraphes ().
Quelqu’un connaît l’astuce pour que ce code permette l’affichage de tout cela ?
Perso, je ne trouve pas…
Merci !
Bonjour,
Merci pour la super astuce ! C’est nickel sauf que je me demande si il y a un moyen pour mettre une taille max ?
Merci encore.
Merci ça fonctionne niquel !
Un GRAND merci pour toi Jonathan pour cette astuce que j’ai testé sur mon site qui est en fait sur le cms blogger et ça marche à merveille ! Mes vidéos son enfin adaptées au mobiles. Thanks man !
Simple et efficace tuto valide merci !
Mon dieu !
Ca a fonctionné du premier coup… c’est si rare !
Milles merci !