Intégrer des vidéos déjà en ligne dans un article WordPress

Comment intégrer des vidéos dans un article WordPress ? comment les afficher y compris sur tablettes ou téléphones ?

Une vidéo affichée sur une page WordPress peut être hébergée sur un serveur distant spécialisé, comme YouTube, Dailymotion, Vimeo, etc.

Intégrer une vidéo dans un article évite à l’enseignant de fournir l’adresse « URL » de la vidéo en ligne et permet de structurer un contenu mêlant texte et médias.

Pour mettre en ligne des vidéos (personnelles) sur le serveur qui héberge WordPress, consulter plutôt l’article http://tice974.ac-reunion.fr/televerser-et-integrer-des-videos.

Il peut être intéressant de comparer l’affichage de cet article avec différents terminaux (PC, tablettes, téléphones) pour comparer le rendu.

Intégrer une vidéo Youtube avec les outils natifs de WordPress (solution complète)

Cette solution fonctionne sans avoir besoin d’extension supplémentaire et sur tous les navigateurs / terminaux.

Suivre la démarche suivante :

  1. dans un navigateur, afficher la page Youtube contenant la vidéo, par exemple : https://www.youtube.com/watch?v=HEzkfrwZ-vI
    Video_Youtube_Integration
  2. dans « Intégrer », décocher d’abord « Afficher les suggestions de vidéos à la fin de la lecture », copier le code « HTML », ici :
    <iframe width="420" height="315" src="//www.youtube.com/embed/HEzkfrwZ-vI?rel=0" frameborder="0" allowfullscreen></iframe>
  3. dans un article WordPress en rédaction, passer du mode « Visuel » au mode « Texte » puis coller le code « HTML », revenir en mode « Visuel » et enregistrer l’article.

Résultat :

La vidéo s’affiche alors dans un cadre dans le contenu de la page, quelques soient le thème, les extensions installées, le navigateur et le terminal utilisés.

Remarques :

  • Cette méthode permet de ne pas avoir de vidéos suggérées à la fin de la lecture.
  • L’éditeur de WordPress a tendance à « nettoyer » régulièrement le code qui n’a pas été écrit par lui, donc éviter de copier / couper / coller un bloc de texte contenant du code « HTML » personnel, il pourrait être supprimé ou modifié. Le cas échéant, supprimer et remettre le code voulu.
  • L’intégration de certaines vidéos peut avoir été désactivée par ceux qui l’ont mises en ligne, cf https://support.google.com/youtube/answer/171780?hl=fr, ce qui rend cette solution impossible…

Mettre un lien vers une vidéo Youtube avec les outils natifs de WordPress (solution basique)

Cette solution est plus simple mais l’affichage sera moins pratique.

Suivre la démarche suivante :

  1. dans un navigateur, afficher la page contenant la vidéo, par exemple : https://www.youtube.com/watch?v=HEzkfrwZ-vI
    Video_Youtube_Partage
  2. dans « Partager cette vidéo », copier le lien court affiché, ici : http://youtu.be/HEzkfrwZ-vI
  3. dans un article WordPress en rédaction, cliquer sur « Ajouter un média », puis « Insérer à partir d’une adresse Web » et coller le lien. Déplacer éventuellement le lien à l’endroit voulu.

Résultat :

Eruption Piton de la Fournaise par Luc Perrot Photographies

La vidéo s’affiche alors comme un simple lien. Son affichage sera fonction du thème choisi, des extensions installées et de la compatibilité du navigateur.
Elle peut s’afficher dans une fenêtre superposée (« popup ») ou séparée ou pas du tout.

Intégrer une vidéo Dailymotion avec les outils natifs de WordPress (solution complète)

Suivre la démarche suivante :

  1. dans un navigateur, afficher la page Dailymotion contenant la vidéo, par exemple : http://www.dailymotion.com/video/xbrg5e_eruption-au-piton-de-la-fournaise-j_people
    Video_Dailymotion_Integration
  2. dans « Exporter », copier le code dans « Copier le code d’intégration », ici :
    <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/xbrg5e" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/xbrg5e_eruption-au-piton-de-la-fournaise-j_people" target="_blank">&eacute;ruption au piton de la Fournaise (janvier 2010)</a> <i>by <a href="http://www.dailymotion.com/legoulp" target="_blank">legoulp</a></i>
  3. dans un article WordPress en rédaction, passer en mode « Texte » puis coller le code « HTML », revenir en mode « Visuel » et enregistrer l’article.

Résultat :


éruption au piton de la Fournaise (janvier 2010) by legoulp

Remarques :

  • Le code fournit permet en même temps l’intégration et en-dessous un lien supplémentaire de secours.
  • Il semble impossible de désactiver l’affichage des vidéos proposées à la fin de la lecture…
  • Comme dans Youtube, l’auteur peut avoir désactivé la possibilité d’intégration…

Intégrer une vidéo Youtube avec une extension de WordPress (solution intermédiaire)

L’intégration par copie du code « HTML » est universelle mais peut rebuter certains auteurs d’articles. Beaucoup d’extensions proposent d’intégrer des vidéos en lignes dans un article WordPress plus simplement, malheureusement presque toutes produisent un affichage nécessitant une extension de navigateur « Adobe flash ».

Or les téléphones et tablettes n’intègrent presque plus cette technique qui semble vouée à disparaitre. Conséquence : les sons et vidéos affichés par une extension WordPress fonctionnant avec « Adobe flash » ne s’afficheront pas sur ces supports !

Si on veut vraiment utiliser une extension de lecture vidéo, elle doit impérativement utiliser la technologie HTML5 compatible avec tous les navigateurs “récents” de tous les supports.
L’extension « VideoJS – HTML5 Video Player for WordPress » est conseillée. Seul un super-administrateur pourra en faire l’installation.

Exemple sur ce site où l’extension est installée et activée :

  1. dans un navigateur, afficher la page Youtube contenant la vidéo, par exemple : https://www.youtube.com/watch?v=HEzkfrwZ-vI
  2. dans « Intégrer cette vidéo », noter la taille d’affichage souhaitée, ici 420 x 315 (inutile d’agrandir)
  3. dans « Partager cette vidéo », copier le lien court affiché, ici : http://youtu.be/HEzkfrwZ-vI
  4. dans un article WordPress en rédaction, cliquer sur l’icône « Insert HTML5 Video »,
    Video_Youtube_Integration_HTML5
  5. dans « YouTube Url » coller le lien de la vidéo
  6. dans « Width », donner la largeur,
  7. dans « Height », donner la hauteur,
  8. tout en bas de cette fenêtre, cliquer sur « Insert Video » qui produit un « shortcode » (code court qui sera interprété par l’extension), ici (les crochets ont été remplacés par des parenthèses) :
    (videojs width="420" height="315")
  9. Suite à un bogue actuel, il arrive que l' »URL » ne soit pas affichée ! Il faut alors la remettre dans le « shortcode », ici (les crochets ont été remplacés par des parenthèses) :
    (videojs youtube="http://youtu.be/HEzkfrwZ-vI" width="420" height="315")

Résultat :

 

Remarques :

  • Est-ce plus simple que la copie du code HTML ? ce n’est pas sûr !
  • Cette extension fonctionne avec les vidéos en ligne sur Youtube uniquement !

CC BY-NC-SA 4.0 Cette œuvre est sous Licence Creative Commons Internationale Attribution-Pas d'utilisation Commerciale-Partage à l'identique 4.0 .

Les commentaires sont fermés.