EDIT du 02/03/2018 :
Je vous livre telle quelle une autre astuce intéressante :
Celle de vous rendre tout simplement sur le site http://embedresponsively.com/ et d’insérer par simple copier/coller l’adresse URL de votre vidéo youtube ( https://youtube.com/watch?v=xxxxxxxxxxx ).
Appuyez ensuite sur « Embed ».
Le site vous régurgite alors un code à coller dans la version HTML de votre site (pour WordPress cliquez simplement sur la case Texte pour avoir accès à cette version de votre article).
La vidéo Youtube apparaîtra alors aggrandie jusqu’aux bords de votre article, quelle que soit sa dimension et quel que soit le support (smartphone, pc, etc.)
Comment centrer une vidéo sous Youtube
J’utilise souvent Youtube pour insérer des clips / vidéos dans mes articles. Mais j’ai l’impression que depuis le passage au HTML5, quelque chose a changé : je n’arrive plus à centrer ces vidéos Youtube dans mon texte.
Auparavant, dans le code source, j’insérais :
<p style="text-align: center;">...</p>
de part et d’autre du code source de la vidéo, et ça marchait.
Le code tout simple :
<center>...</center>
fonctionnait aussi. Mais plus maintenant.
J’ai cherché la solution et j’ai constaté qu’en fait, seule la commande suivante fonctionne pour centrer le code Youtube :
<div align="center">...</div>
Ça peut peut-être vous servir (lancez pas les pierres, je ne suis pas un codeur pro 😀 )
EDIT : Le code de Mimie
Code donné par Mimie dans les commentaires ci-dessous, je le reproduis ici parce qu’en effet, après test il fonctionne bien :
<center>...</center> ainsi que <div align="center"> sont devenus des balises/attributs obsolètes de nos jours, même si elles sont plus ou moins bien considérés par les différents navigateurs …
Etant donné que l’insertion d’une vidéo youtube (ou autre d’ailleurs) se fait avec un bout de code ressemblant à cela : <iframe width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>, la meilleure solution est pour moi l’ajout du style suivant sur la balise iframe : “margin: 0 auto” (l’attribut width jouant bien son rôle).
Ce qui se traduit donc au final par l’insertion d’un code tel que :
<iframe style="margin: 0 auto" width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>
Bonjour. Comme l’article date un peu (et même les mises à jour), peut-être que tout à changer mais pour centrer une vidéo, il suffit de récupérer le code (<iframe…) de le coller dans l'article avec texte (dans wordpress) puis une fois retourner dans l'éditeur de mettre le curseur à côté de la vidéo et de cliquer sur le centrage du texte. Je ne parle que des éditeurs classiques, pas de Gounnnteur beurk que je n'aime pas du tout 😉
Cordialement et merci de ton travail
Bjr Dominique,
En effet j’ai la même impression que toi, WordPress a dû faire une modif.
Faudra peut-être que je mette à jour l’article mais les codes peuvent servir à certains.
Bonne continuation.
Merci beaucoup, c’est exactement ce que je cherchais 🙂
Merci de ta participation en tout cas !
Mise à jour de l’article avec une autre astuce.
Super, avec … ça fonctionne, merci pour cette astuce !
J’ai enfin pu centrer mes vidéos 🙂
http://canima.net/videos-canima/
😀
oui sauf que ça ne marche pas!
T’as essayé de mettre WordPress à jour ? Chez moi ça fonctionne. (mettre à jour le HTML 5 aussi)
merci pour greg et mimi pour les codes ,maintenant ,on a plus de choix pour insérer nos vidéos!
Je te jette un galet pour la peine !! 🙂
<center> … </center> ainsi que <div align= »center »> sont devenus des balises/attributs obsolètes de nos jours, même si elles sont plus ou moins bien considérés par les différents navigateurs …
Etant donné que l’insertion d’une vidéo youtube (ou autre d’ailleurs) se fait avec un bout de code ressemblant à cela :
<iframe width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>, la meilleure solution est pour moi l’ajout du style suivant sur la balise iframe : « margin: 0 auto » (l’attribut width jouant bien son rôle).Ce qui se traduit donc au final par l’insertion d’un code tel que :
<iframe style="margin: 0 auto" width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>Hop ! je choppe ton galet et je testerai ton code, peut me rendre 🙂
Ok, ton code marche impec, je le rajoute dans l’article. Thx !