skip to Main Content

Comment ouvrir une vidéo Youtube dans un popup sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

La lightbox ou fenêtre modale (pop up) est une fonctionnalité très répandue sur le net. Cependant, elle est généralement utilisée pour afficher des images, des formulaires de capture email, des promotions ou encore des formulaires d’inscriptions. 

Mais savez-vous qu’il est possible de l’utiliser également pour afficher des vidéos sur WordPress ? Non ?! 

Pas d’inquiétude, dans ce tutoriel, je vous montrerai comment afficher une vidéo (Youtube – Vimeo – etc) dans une lightbox.

YouTube-vs-Vimeo

Avant toute chose, j’aimerais vous dire pour quelles raisons vous devez utiliser une lightbox pour afficher vos vidéos sur WordPress. Les lighbox sont des fenêtres modales, cependant, ce que vous ne savez pas c’est que toutes les images qui y sont affichées ne sont pas toutes chargées durant le « chargement » de la page. 

Le navigateur charge les images lorsque la lightbox s’ouvre, c’est également le cas des vidéos. En bref, c’est une fonctionnalité qui permettra à vos pages de s’ouvrir plus rapidement. Elle vous permettra également de réduire la taille (longueur) de votre page, car une partie du contenu de cette page sera disponible dans la fenêtre.

Trêve de bavardage, passons aux choses sérieuses.

Comment installer et configurer le plugin WP Video Lightbox

WP Video Lightbox est un plugin disponible sur WordPress.org. Ce qui signifie que vous pouvez l’installer directement depuis votre tableau de bord WOrdPress, ou le télécharger sous forme de fichier .zip .

Après avoir activé le plugin, accédez à sa page de réglages depuis cet emplacement « Réglages >> Video lightbox ».

Nous accéderons directement à l’onglet « prettyPhoto ».

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

En réalité, ce plugin utilise un autre plugin, qui lui est destiné principalement pour afficher une galerie photos. Mais vous pouvez modifier certaines informations qui seront appliquées aux vidéos. Pour ça, je vous expliquerai certaines options (indispensables), afin que tout se passe comme vous le souhaitez.

Déjà la librairie prettyPhoto doit être active (cocher « Enable prettyPhoto »)Pour permettre aux utilisateurs de savoir qu’ils sont sur la même page, vous pourrez rendre la fenêtre transparente (définir une valeur de 0 à 1. Les fichiers à virgules sont acceptés).

Toutes vos diapositives peuvent avoir un titre qui peut être affiché (Show title). Parfois pour de grandes diapositives, vous devrez autoriser le redimensionnement (Allow resize). Et pour des vidéos plus longues, les utilisateurs pourront les agrandir (Allow Expand), pour mieux les regarder.

Pour la largeur et la hauteur de la lightbox, vous pouvez modifier les champs « default width » et « default height ». Pour choisir le thème de la lightbox, modifiez le menu déroulant « theme ». Il est également possible d’activer la lecture automatique (cochez a case « Autoplay »).

definir-les-regalges

Comment afficher une lightbox dans un article

Le plugin propose une liste de shorcodes qui vous permettrons d’afficher des lightbox dans des articles. J’ai oublié de vous dire que vous pouvez également afficher les vidéos disponibles sur vimeo.

Pour afficher une vidéo youtube ou viméo, vous utilisez les shortcodes suivant :

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

[video_lightbox_youtube] (pour youtube)
[video_lightbox_vimeo5] (pour vimeo)

Chacun de ces shortcodes accepte des paramètres, qui vous permettrons de :

  • Définir l’identifiant (video_id) d’une vidéo, généralement en ce format « YzqKMmQ_3Sg ». Exemple [video_lightbox_youtub video_id= » YzqKMmQ_3Sg »]
  • Définir la hauteur de la vidéo (height)
  • Définir la largeur de la vidéo (width)
  • Ajouter une description (description)
  • Ajouter une ancre HTML (anchor), ou texte du lien qui ouvrira la fenêtre
  • Ajouter une miniature (auto_thumb)

Si vous définissez une ancre HTML, la miniature sera ignorée. Dans le cas contraire, auto_thumb prend la valeur « 1 ».

Démo d’une utilisation

Avec ce que je viens de vous fournir comme information, vous pouvez afficher une vidéo en utilisant un code similaire à celui-ci :

[video_lightbox_youtube video_id= »YzqKMmQ_3Sg&rel=0 » width= »640 » height= »480 » anchor= »Une simple vidéo » description= »Par Dr WP »]

Pour un résultat pareil

presentation-des-resultats

Vous pouvez afficher une miniature comme il a été indiqué plus haut avec un code similaire à celui-ci.

[video_lightbox_youtube video_id= »YzqKMmQ_3Sg&rel=0 » width= »640 » height= »480 » auto_thumb= »1 » description= »Par Dr WP »]

Pour un résultat identique à celui-ci

miniature-dune-video

Avant de nous quitter

Certains paramètres dans les shortcodes écraseront ceux définis dans les réglages.

C’est tout pour ce tutoriel, j’espère qu’il vous aidera à afficher des vidéos Youtube ou Viméo dans une lightbox sur votre site WordPress.

N’oubliez pas de le partager si vous l’avez aimé.

Cet article comporte 7 commentaires
  1. Bonjour,
    Je cherche un moyen pour afficher une popup vidéo après un clic sur un bouton. Est-il possible de faire ça avec WP Video Lightbox?

    Merci,
    Cordialement,

  2. Bonjour,
    Merci beaucoup pour ce tutoriel bien construit, je voulais savoir si il était possible de rajouter des vidéos en provenance de d’autres plateformes autres que You Tube et Viméo (exemple Openload) ou s’il y aurait une limite.

    Bien à vous 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
7 Partages
Partagez5
Tweetez
Enregistrer2
WhatsApp