Pages Menu
TwitterRss
Categories Menu

Posted on 14 Juil, 2012 in WebTech, WordPress |

Centrer vos vidéos dans WordPress

[heading style=2]Depuis la version 2.9 (hé oui!) de WordPress, entre autres améliorations et ajouts de fonctionnalités, il n’est plus nécessaire d’installer un plugin pour intégrer une vidéo dans votre blog WordPress. En effet le simple ajout de l’adresse web de la vidéo seule dans votre article/page et hop, WordPress fait le reste!

Cette fonctionnalité supporte Youtube bien sûr, mais aussi dailymotion, flikr, twitter et d’autres encore…

Question mise en page par contre c’est un peu limité…. La seule option qu’on puisse lui ajouter c’est une taille maximum (pas fixe hein! Maximum qu’on t’a dit!) [/heading]

Inconvénient: mise en page de la vidéo

Perso j’adore cette fonctionnalité qui m’a fait gagner quasi 1 Giga sur mon serveur! Bein oui, plus obligé de les  héberger, même si pour certaines, on préférera éviter de les envoyer chez n’importe qui…. Néanmoins (c’est joli néanmoins) il me restait toujours une petite arrête en travers de la gorge: avec cette fonctionnalité certes pas d’options de mise en page mais en plus, impossible de simplement cliquer sur notre bon vieux « align center » de l’éditeur… Si l’éditeur touche quoi que ce soit dans notre lien tout est foutu… (c’est d’ailleurs souvent la cause d’une vidéo qui ne veut pas s’afficher, vérifiez que votre lien ne soit pas entre des balises <p> par exemple)

Les’ options de WordPress

De son côté l’intégration des vidéos par WordPress, et plus précisément par oembed possède une (malheureuse) option: on peut lui attribuer une taille maximum avec le code suivant:

{embed width=’300′ height=’90′}URL-a-poster{/embed}
J’ai dû inverser les crochet autour de embed et /embed sinon WordPress me le bouffait…

Solution: centrer une vidéo dans WordPress

Donc voici la parade: pour centrer notre vidéo il suffit de passer sur l’éditeur en mode html et d’inscrire notre lien au milieu d’une balise <div> bien aérée (passez à la ligne à chaque fois):

^div style= »text-align: center; »^
{embed width=’300′ height=’90′}l/adresse/de/votre /vidéo{/embed}
^/div^
Et ici j’ai remplacé les <> par ^, mais aurez compris…

Et le tour est joué!!!

astuce trouvée en parcourant les forums de WordPress-fr