Veazio.com

Communication visuelle et Marketing

Vous devez activer javascript pour afficher ce contenu J’ai mis beaucoup de temps pour savoir comment insérer parfaitement des vidéos provenant de Youtube, Vimeo, Dailymotion... Insérer des vidéos dans votre blog ou site WordPress

thumb_wp_videosJ’ai mis beaucoup de temps pour savoir comment insérer parfaitement des vidéos provenant de Youtube, Vimeo, Dailymotion etc… dans un site WordPress. Après avoir essayer les « embed codes », les « iframes », l’importateur automatique de WordPress et différents plugins, je n’ai jamais réussi à intégrer correctement une vidéo à partir d’un autre site et le résultat n’était jamais satisfaisant. Pour moi WordPress a encore un petit retard en matière de vidéo. Afficher une vidéo selon une taille désirée et surtout centrée n’est pas chose aisée avec cette plate-forme. Mais ce n’était pas la les seuls problèmes…

Les problèmes les plus courants étaient les suivants:

  • vidéos invisibles.
  • Cadre gris ou jaune à la place de la vidéo.
  • vidéos visibles mais avec du code présent sur la page.
  • vidéos non centrées.
  • Taille de la vidéo non paramétrable.
  • etc…

Après avoir réfléchi à ce problème, j’ai trouvé 2 solutions qui sont en réalité assez simples:

  • Soit vous entrez simplement l’URL ou se trouve la vidéo dans la partie HTML de votre éditeur Wordpress et la vidéo s’intégrera directement dans l’article (mais vous n’aurez pas la possibilité de centrer la vidéo ou de changer la taille du lecteur).
  • Soit vous formulez un « embed code » assez simple mais qui vous offrira plus de possibilités de paramétrages.

Ces méthodes ne sont pas difficiles à réaliser mais ayant mis quand même un certain temps à les trouver dans les entrailles du net, je me suis dit que bon nombre d’internautes aimeraient trouver une réponse claire à ce problème, c’est pourquoi j’ai rédigé cet article.

  • Il est également important de noter que ces solutions ne fonctionnent pas avec tous les sites de vidéos,seulement avec les plus connus.

Insérer automatiquement des vidéos dans WordPress

La solution la plus simple pour insérer une vidéo dans votre blog ou site est de vous rendre dans la partie HTML de votre éditeur de texte. Repérez ensuite l’endroit ou vous voulez que votre vidéo apparaisse et collez alors le lien de cette vidéo à cet endroit. J’entend par lien: l’adresse Url ou se trouve la vidéo.

Ce lien est donc de la forme:

  • http://www.youtube.com/watch?v=rjFXnEadP2
  • http://dailymotion.com/nom_video
  • http://vimeo.com/31531479

Une fois que vous avez copié et collé ce lien dans votre éditeur HTML, générez un apercu de votre article et vous verrez que votre vidéo apparaît bel et bien.

Cette solution est la  plus simple mais aussi la moins efficace car elle ne vous donne pas accés aux contrôles de la taille de la vidéo par exemple. Si vous désirez que votre lecteur vidéo corresponde à une taille en particulier, lisez le paragraphe ci-dessous.

Insérer une vidéo selon les dimensions désirées

Pour le professionnalisme et l’esthétisme de votre site ainsi que pour le confort visuel de vos visiteurs, il est important d’intégrer des vidéos de taille standard et qui concordent avec la mise en page de votre blog ou site Web. Ainsi, si vous intégrez une vidéo dans une des pages de votre site, je vous conseille, lors de l’insertion de la prochaine vidéo de re-utiliser la même taille, ce qui aura pour effet de générer une certaine harmonisation et régularité à ce niveau.

Pour inserer une vidéo d’une certaine dimension, la technique est de copier et coller ce code dans votre article (partie HTML ou éditeur visuel peu importe):

[embed width="480" height="320"]URL-de-la-vidéo[/embed]

Bien entendu, les chiffres représentent la taille de la vidéo, à vous de les changer à votre convenance, tout comme l’URL…

  • Lorsque vous changez la taille, il faut que les dimensions de la vidéo restent proportionnelles. Pour ce faire, divisez la hauteur par la largeur, vous allez trouver un chiffre inférieur à 1. Multipliez ce chiffre par la nouvelle largeur désirée et vous trouverez ainsi la taille de la hauteur. Par exemple votre vidéo fait actuellement 600 x 480 px et vous voulez la réduire pour qu’elle ne fasse que 400 px de largeur au lieu de 600. La méthode à suivre serait la suivante: 480/600 = 0.8. Multiplions ce chiffre par la nouvelle largeur désirée: 0.8 x 400 = 320. Les dimensions de la nouvelle vidéo seraient donc de 400 x 320 px.
  • Notez également que lorsque vous insérez le lien de la vidéo, celui ci ne doit pas être un lien hypertexte, autrement dit: il ne doit pas être actif.

Placer la vidéo au centre

Si la taille de la vidéo est inférieure à la largeur de votre page, alors votre vidéo se retrouvera presque tout le temps sur la gauche de la page. Cela n’est pas toujours très esthétique. C’est pourquoi si vous désirez centrer la vidéo dans votre article, il suffit juste de cliquer sur le bouton « centrer le texte » (comme si vous centrez un texte dans l’éditeur visuel).

Les vidéos Youtube

Youtube génère automatiquement un code iframe à insérer dans votre site. Pour cela, cliquez sur le bouton Intégrer en dessous de la vidéo, sélectionnez les dimensions désirées. Cela aura pour effet de générer automatiquement un code iframe que vous devez insérer dans l’éditeur HTML de votre article. Pour centrer la vidéo, il suffit d’entourer cet iframe avec les balises <center> et </center>. Vous pouvez également revenir dans votre éditeur texte et centrer le code comme si vous centriez un texte.

Un plugin d’insertion de vidéos ?

Il existe un plugin qui va chercher directement votre vidéo dans plus de 14 sites de partage de vidéos, il s’agit de Viper’s Video Quicktags. Il fonctionne très bien et permet de faire la même chose que ce que je vous ai montré ci-dessus, c’est a dire le choix de la taille de la vidéo et la possibilité de centrer la vidéo.

Envoyer ses propres vidéos

WordPress ne permet pas encore d’envoyer nativement vos vidéos vers votre site ou blog (la taille maximale des fichiers envoyées est de 64 mo). Si vous désirez envoyer vos propres vidéos sur votre site, la principale méthode à utiliser est selon moi l’utilisation du plugin FlowPlayer qui permet de diffuser vos vidéos stockées dans votre dossier wp-content/vidéo, dossier qui sera créé (source).

 

Sources:
http://www.vincentabry.com
http://www.wordpress-fr.net/support/
http://dianebourque.com
http://codex.wordpress.org/Embeds
http://en.support.wordpress.com

[Total : 0    Moyenne : 0/5]

  • Camille

    18/11/2012 #1 Author

    Clair, simple, efficace ces explications. Merci ! (je n’aurai jamais pensé à insérer simplement l’URL de la vidéo !).

    Répondre

    • Veazio

      19/11/2012 #2 Author

      Claires, simples et efficaces… telles sont les valeurs de Veazio 😉

      Répondre

  • yepyep

    22/11/2012 #3 Author

    moi ce que je veux c’est insérer MES videos qui sont sur MON ordi pas en passant par un hebergeur comme YT Daily ou autres… c’est possible ça et comment ? merci pour toutes vos réponses !

    Répondre

  • Veazio

    23/11/2012 #4 Author

    Pour mettre une vidéo en ligne vous devez obligatoirement l’héberger sur Intenet, c’est à dire qu’il faut passer par votre hébergeur de données (ou peut-être même Google Drive) dans lequel vous uploaderez la vidéo.

    Vous obtiendrez ainsi une Url de localisation de la vidéo, c’est celle-çi qu’il faudra renseigner dans le champs demandé par WordPress lorsque vous insérez un média vidéo.

    Une recherche google avec ces termes pourrait aussi être bénéfique; essayez ces termes: « insérer ses propres vidéos dans WordPress » 😉

    Répondre

    • damien64230

      07/03/2013 #5 Author

      Il y a un code pour insérer nos propres vidéos sur WordPress mais je pense qu’il est plus conseiller de l’héberger dabord car si la personne a un compte gratuit elle peux vite tout remplir en mettant beaucoup de vidéo ^^’. Dsl de ne pas avoir préciser le code mais je ne m’en souviens plus trop en tout cas tuto très propres, soignés et compréhensif. A bientôt 😀

      Répondre

  • Camille

    17/01/2013 #6 Author

    Merci!

    Répondre

  • Agnouch

    06/04/2013 #7 Author

    Clair, net, précis, efficace.
    Ca faisait longtemps que je galérais sur l’intégration de vidéos.
    Merci pour cette aide précieuse.

    Répondre

  • Unkonnu

    10/05/2013 #8 Author

    Un grand merci pour tes explications.
    J’ai filmé un interview avec un iphone en position verticale. Du coup l’image est rectangulaire et pas jolie à regarder. Comment puis je basculer la vidéo en position horizontale sans dénaturer le contenu et conserver mon personnage toujours en position verticale, comme si nous discutions en face à face.

    Par avance merci pour vois réponses.

    Répondre

  • Clémentine

    23/05/2013 #9 Author

    Merci beaucoup pour ce tuto, cela faisait une demi-heure que je galérais pour insérer une vidéo à partir de Vimeo et là… En deux secondes chrono, c’était réglé ! Merci encore !

    Répondre

  • XXXX

    29/05/2013 #10 Author

    Merci !

    Répondre

  • vidéosanspub

    16/09/2013 #11 Author

    Bonjour,
    Et merci pour cet article, très clair !
    Je suis en train d’intégrer une vidéo Dailymotion sur un site commercial, et je souhaite m’assurer que la vidéo en question, qui présente notre produit, ne soit JAMAIS précédée par une publicité. Savez-vous si c’est possible ? Je n’ai pas vraiment l’impression qu’on puisse le garantir -sinon, si qqn peut m’indiquer une plateforme concurrente qui peut garantir de ne jamais exposer une pub sur une vidéo sans qu’on ait coché une case, je suis preneur !
    Merci d’avance,

    Répondre

    • Veazio

      16/09/2013 #12 Author

      Bonjour,
      pour ma part je ne me sers pas trop de Dailymotion, je laisse donc la parole à un internaute qui passera par ici et qui aura une réponse. Mais je pense que l’insertion de pub ne se fait pas automatiquement. En effet, dans l’ aide de Dailymotion, ils disent bien que parfois, certaines personnes ne veulent pas monétiser leur contenu, ce qui rend possible l’intégration de vidéos sans publicité.

      Répondre

  • mimile

    15/02/2014 #13 Author

    bonjour
    lorsque j’intègre avec l’html une vidéo dans le bas d’un article l’ouverture de la page se fait toujours en bas sur la vidéo.
    c’est pas très beau et je ne trouve pas la solution pour éviter cela.
    merci pour votre réponse
    bonne fin de journée

    Répondre

  • Veazio

    17/02/2014 #14 Author

    Bonjour,
    bizarre cette situation car l’affichage d’une page débute toujours par le haut. Et ce, même si votre vidéo se trouve à la fin de la page…
    Je vous conseille de publier votre problème sur le forum wordpress-fr.net.

    Répondre

    • mimile

      19/02/2014 #15 Author

      bonjour
      merci pour votre réponse
      oui c’est bizarre d’autant plus qu’avec le lecteur youtube tout est normale (intégration html).
      merci quand même
      cordialement

      Répondre

  • mimile

    19/02/2014 #16 Author

    ps:
    je n’ai ce problème qu’avec les html google drive

    Répondre

Laisser un commentaire

%d blogueurs aiment cette page :