Insérer une vidéo dans WordPress : mode d’emploi

La procédure pour intégrer des vidéos dans WordPress dépend de la solution que vous préférez parmi les trois sus­men­tion­nées. Il va de soi que la méthode con­sis­tant à utiliser un plug-in diffère de celle se basant sur la bi­blio­thèque de médias intégrée ou sur le code d’in­té­gra­tion. Nous avons résumé pour vous les dif­fé­rentes étapes de ces trois solutions dans les pa­ra­graphes qui suivent.

Si vous êtes l’auteur ou le pro­prié­taire d’une vidéo, vous pouvez à tout moment la charger dans la bi­blio­thèque de médias de votre projet WordPress.

Étape 1 : Pour commencer, rendez-vous dans la rubrique Médias de l’interface d’ad­mi­nis­tra­tion en cliquant sur le bouton « Médias » dans le menu à gauche :

Étape 2 : Cliquez ensuite tour à tour sur « Ajouter » et « Choisir des fichiers ». Vous pouvez main­te­nant indiquer et confirmer l’em­pla­ce­ment de stockage du fichier vidéo souhaité pour lancer le char­ge­ment dans la bi­blio­thèque de médias. Vous pouvez aussi glisser et déposer le clip dans le cadre prévu à cet effet (délimité par des lignes poin­til­lées) :

Étape 3 : Ouvrez main­te­nant la page WordPress à laquelle vous voulez ajouter la vidéo et cliquez sur le symbole Plus pour ajouter un nouveau bloc :

Étape 4 : Faites défiler jusqu’à la rubrique « Médias » et sé­lec­tion­nez l’entrée « Vidéo » pour ajouter un bloc de contenu vidéo à la page. Dans ce bloc, cliquez main­te­nant sur « Bi­blio­thèque de médias ». WordPress ouvre l’aperçu des vidéos dis­po­nibles, où vous pouvez fa­ci­le­ment sé­lec­tion­ner celle que vous voulez par un clic gauche. Si vous le désirez, vous pouvez inclure des mé­ta­don­nées telles qu’un titre, une légende et une des­crip­tion. Enfin, pour intégrer la vidéo à votre projet WordPress, cliquez sur le bouton « Sé­lec­tion­ner ».

La vidéo est main­te­nant intégrée à votre page WordPress. Au besoin, vous pouvez comme avec n’importe quel autre bloc de contenu la déplacer ailleurs ou l’échanger avec d’autres éléments.

Pour éviter d’avoir à charger des vidéos dans votre espace Web et ainsi éco­no­mi­ser beaucoup d’espace de stockage et de puissance de calcul, vous pouvez également recourir à une pla­te­forme vidéo telle que YouTube ou Vimeo. Vous aurez la pos­si­bi­lité d’y obtenir un code d’in­té­gra­tion (« embed code » en anglais) à l’aide duquel vous pourrez intégrer la vidéo dans votre projet WordPress. Selon la teneur de votre site Web, vous pourrez aussi insérer des vidéos d’autres uti­li­sa­teurs (à condition que ces derniers dé­tien­nent les droits relatifs au contenu et n’aient pas rendu les vidéos privées).

Pour ajouter une vidéo YouTube (la procédure diffère lé­gè­re­ment pour les autres pla­te­formes) par un code d’in­té­gra­tion, suivez les étapes suivantes :

Étape 1 : Accédez à la vidéo YouTube voulue et cliquez sur le bouton « Partager » situé juste au-dessous du clip.

Étape 2 : Choi­sis­sez l’option « Intégrer » pour accéder aux options d’in­té­gra­tion. Là, vous pouvez soit conserver les pa­ra­mètres par défaut, soit modifier lé­gè­re­ment le code d’in­té­gra­tion. D’une part, vous avez la pos­si­bi­lité de caler la vidéo au moment précis auquel elle devra démarrer au­to­ma­ti­que­ment (« Démarrer à »). D’autre part, vous pouvez activer le mode de con­fi­den­tia­lité avancé en cochant la case cor­res­pon­dante afin de protéger la vie privée de vos visiteurs. Pour finir, cliquez sur « Copier » afin d’en­re­gis­trer le code dans le presse-papier en vue de l’importer dans WordPress.

Étape 3 : Dans l’interface d’ad­mi­nis­tra­tion de WordPress, allez à la page dans laquelle vous voulez insérer la vidéo. Collez le lien du clip di­rec­te­ment à l’endroit souhaité en créant un bloc HTML et en utilisant le raccourci clavier [Ctrl] + [v] ou en cliquant avec le bouton droit de la souris et en choi­sis­sant l’option « Coller ».

Étape 4 : WordPress insère au­to­ma­ti­que­ment la vidéo au format habituel. En cliquant sur « Aperçu », vous pouvez pré­vi­sua­li­ser le résultat.

Que vous chargiez des vidéos dans votre espace interne ou sur une pla­te­forme externe, l’uti­li­sa­tion de plug-ins vidéo WordPress comporte l’avantage de pouvoir intégrer des images animées de la manière la plus simple qui soit tout en profitant de fonc­tion­na­li­tés sup­plé­men­taires pratiques. Pour ce faire, il suffit d’installer le plug-in souhaité. WordPress sera enrichi de menus faciles à utiliser dans son interface d’ad­mi­nis­tra­tion ou de boutons dans son éditeur pour manipuler l’extension concernée.

La façon la plus simple d’obtenir une vue d’ensemble des plug-ins vidéo WordPress dis­po­nibles est de consulter la section Plug-ins de l’interface d’ad­mi­nis­tra­tion. Vous pouvez également y installer, con­fi­gu­rer et activer les ex­ten­sions sou­hai­tées (et si né­ces­saire les dé­sac­ti­ver et les supprimer). La marche à suivre est la suivante :

Étape 1 : Dans le menu latéral gauche de l’interface d’ad­mi­nis­tra­tion de WordPress, allez à la section « Ex­ten­sions » et cliquez sur l’option « Ajouter ».

Étape 2 : Vous pouvez main­te­nant taper un mot-clé dans la barre de recherche (en haut à droite) pour re­cher­cher le plug-in vidéo WordPress de votre choix. Pour vous faire une idée générale, tapez par exemple « vidéo » :

Étape 3 : Après avoir choisi une extension, cliquez sur le bouton « Installer ». Après l’ins­tal­la­tion, vous pourrez activer le plug-in di­rec­te­ment en cliquant sur le bouton « Activer l’extension » :

Étape 4 : Vous pouvez main­te­nant choisir d’accéder à l’extension via le sous-menu « Ex­ten­sions ins­tal­lées » ou via un nouveau bouton per­son­na­lisé dans le menu latéral de l’interface d’ad­mi­nis­tra­tion, comme dans le cas du plug-in « Video Gallery » d’Ori­gin­Code illustré ici :

Quand il est question d’intégrer du contenu YouTube, il est difficile d’ignorer Embed Plus for YouTube. Le plug-in, qui compte plus de 200 000 ins­tal­la­tions actives et est com­pa­tible avec l’éditeur WordPress Gutenberg, permet d’in­cor­po­rer des clips YouTube, mais aussi des playlists et chaînes complètes ainsi que des li­ves­treams. Le « YouTube Wizard » est un ges­tion­naire de con­fi­gu­ra­tion convivial dis­po­nible di­rec­te­ment dans l’éditeur. En passant à la version Pro payante, des fonc­tion­na­li­tés sup­plé­men­taires, telles que le balisage au­to­ma­tique des vidéos pour le ré­fé­ren­ce­ment ou une fonction de mise en cache, peuvent être dé­blo­quées.

Toute personne qui gère un blog connaît l’im­por­tance de proposer une per­for­mance fluide sur tous les terminaux. Le temps de char­ge­ment, en par­ti­cu­lier, joue ici un rôle crucial. En con­sé­quence, si les vidéos YouTube occupent une place im­por­tante dans votre blog WordPress, l’uti­li­sa­tion de WP YouTube Lyte est vivement con­seil­lée.

Ce plug-in permet d’appliquer le lazy loading à toutes les vidéos WordPress intégrées. Très rapides à charger, les « Lite YouTube Embeds » res­semblent à des clips YouTube intégrés normaux, mais ne sont activées que lorsque le visiteur clique sur le lecteur (gourmand en mémoire). Autre fonc­tion­na­lité de l’extension : les vidéos YouTube peuvent être mises en cache lo­ca­le­ment, de sorte qu’il n’y a plus besoin de réaccéder aux serveurs de la pla­te­forme vidéo ul­té­rieu­re­ment.

Parmi les outils de con­cep­tion pour les projets Web modernes, le dé­fi­le­ment parallaxe est en train de devenir in­con­tour­nable. Le plug-in gratuit Advanced WordPress Back­grounds (AWB) vous aide à mettre en œuvre cet effet dans votre projet WordPress. L’extension permet de créer des arrière-plans pa­ral­laxes per­son­na­li­sés pour certaines pages à partir d’images ou de vidéos (auto-hébergées, YouTube ou Vimeo). La base technique est le puissant plug-in Ja­vaS­cript Jarallax.

Une façon très appréciée de présenter plusieurs vidéos à la fois sur le Web est de créer des galeries, et le plug-in Video Gallery de Total Soft est une ex­cel­lente solution pour mettre en œuvre cette fonction dans votre projet Web. Avec la version de base gratuite, vous pouvez composer et publier des galeries vidéo avec un nombre illimité de clips provenant de YouTube, Vimeo et Wistia ou de votre propre source.

Toutes les galeries sont réactives et peuvent être triées par glisser-déposer. Pour une con­cep­tion per­son­na­li­sée des galeries, nous vous con­seil­lons de passer à l’une des versions payantes (à partir de 12,79 €). Vous aurez ainsi accès à des thèmes de galerie, polices de ca­rac­tères et effets de survol sup­plé­men­taires, ainsi qu’à diverses autres options de style.