TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

YouTube, Vimeo Video Lightbox Popup pour Weebly

4

Weebly propose de nombreux éléments pour intégrer des vidéos sur votre site. YouTube et les éléments de code d’intégration sont disponibles pour les utilisateurs gratuits. L’ élément de lecteur vidéo HD hébergé n’est disponible que pour les utilisateurs de forfaits pro et supérieurs. Mais toutes ces options vous permettront d’intégrer des vidéos sur la page sans possibilité de les afficher dans une lightbox popup. Dans cet article, nous expliquerons comment intégrer YouTube et Vimeo Video dans une lightbox contextuelle à l’ aide du widget jQuery.

Voici quelques-unes des fonctionnalités du widget :

  • Vous pouvez lier le widget à un texte, un bouton ou une image.
  • La vidéo s’ouvrira dans un mode popup lightbox, chaque fois que les utilisateurs cliquent sur un lien.
  • Il est possible de lier YouTube, Vimeo ou toute autre source vidéo.
  • Vous pouvez personnaliser la largeur et la hauteur de la fenêtre contextuelle pour l’adapter à la mise en page de votre site.
  • Widget a deux options pour fermer la fenêtre contextuelle – soit en cliquant sur le bouton de fermeture, soit en cliquant sur la zone de superposition extérieure.
  • La fenêtre contextuelle vidéo est entièrement réactive et fonctionne sur tous les appareils.

Comment ajouter un widget dans le site Weebly ?

Étape 1 – Téléchargez les fichiers

Le widget vidéo lightbox nécessite un script jQuery, CSS et HTML. Téléchargez le fichier d’archive zip "Video Lightbox.zip" en cliquant sur le bouton de téléchargement ci-dessous.

Décompressez l’archive et extrayez les éléments suivants :

  • video-popup.js
  • video-popup.css
  • close.png

Étape 2 – Téléchargement de fichiers dans Weebly

La deuxième étape consiste à télécharger tous les fichiers sur votre site Weebly. Accédez à l’onglet «Thème» et cliquez sur le bouton «Modifier HTML / CSS ». Vous serez redirigé vers l’éditeur de code Weebly et accédez à la section « Actifs ». Téléchargez les trois fichiers et enregistrez vos modifications.

YouTube, Vimeo Video Lightbox Popup pour Weebly

Téléchargement de fichiers Widget dans Weebly

Remarque : Si vous avez beaucoup de fichiers téléchargés dans la section des actifs, créez un nouveau dossier nommé « videolightbox » et téléchargez les fichiers à l’intérieur du dossier.

Étape 3 – Liens pour les fichiers téléchargés

Les fichiers téléchargés auront les liens relatifs suivants :

  • /files/theme/video-popup.js
  • /files/theme/video-popup.css
  • /files/theme/close.png

Vous pouvez également utiliser les URL absolues comme ci-dessous :

Si cela ne fonctionne pas, faites un clic droit sur le fichier téléchargé et copiez l’URL Weebly complète. Cela devrait ressembler à ci-dessous :

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png

N’oubliez pas d’utiliser la bonne URL dans les sections suivantes. En cas de doute, collez l’URL complète dans le navigateur et vérifiez que vous pouvez afficher le contenu.

Étape 4 – Script de liaison dans la page Weebly

Sur votre site Weebly, ouvrez la page sur laquelle vous souhaitez insérer le widget de lightbox vidéo et accédez à la section « Paramètres SEO > Code de pied de page ». Collez le code suivant pour lier le fichier de script dans le pied de page :

<script type="text/javascript" src="/files/theme/video-popup.js"></script>

YouTube, Vimeo Video Lightbox Popup pour Weebly

Ajouter un code de pied de page dans la page Weebly

Étape 5 – Lien CSS dans la page Weebly

Ajoutez le code ci-dessous dans la section "Paramètres SEO > Code d’en-tête" pour lier le fichier CSS.

<link rel="stylesheet" type="text/css" href="/files/theme/video-popup.css"></link>

Étape 6 – Insertion HTML

Revenez à la zone de contenu de la page après avoir inséré le script et le CSS. Faites glisser et déposez un élément de code intégré et insérez le code HTML ci-dessous.

<!-- YouTube Popup as Button with Autoplay --> <div class="btn"> <a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a> </div> <!-- YouTube Popup as Button without Autoplay --> <div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a> </div> <!-- Vimeo Popup as Text Link with Autoplay --> <p> <a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a> </p> <!-- Vimeo Popup as Text Link without Autoplay --> <p> <a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a> </p> <!-- YouTube Video Linked with Image without Autoplay --> <div> <a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88576-613230c13b5c8.jpg" width="300" height="150"></a> </div>

Étape 7 – Personnalisation du widget

  • Ajoutez uniquement le bloc HTML requis pour insérer un bouton, un lien texte ou une image.
  • Remplacez l’URL de l’image et les URL de la vidéo par les vôtres.
  • La largeur et la hauteur maximales de la fenêtre contextuelle sont respectivement définies comme 680px et 480 px, que vous pouvez personnaliser dans le CSS.
  • Nous vous recommandons d’utiliser la fenêtre contextuelle vidéo sans option de lecture automatique pour offrir une meilleure expérience utilisateur. Assurez-vous également de décrire clairement que cliquer sur le lien ouvrira une fenêtre contextuelle.
  • Le blocage des fenêtres contextuelles dans les navigateurs bloque généralement la fenêtre contextuelle qui s’ouvre dans une nouvelle fenêtre. Cette fenêtre contextuelle vidéo fonctionnera même la fenêtre contextuelle bloquée par l’utilisateur dans le navigateur.
  • Ce widget est référencé à partir du widget lightbox jQuery YouTube et modifié pour s’adapter au site Weebly. Vous pouvez également l’utiliser sur d’autres plateformes.
  • Vous ne pouvez pas l’utiliser avec l’élément de lecteur vidéo Weebly Pro HD car vous n’obtiendrez pas l’URL de la vidéo téléchargée lors de l’utilisation de cet élément. Le widget sera utile, tant que vous avez l’URL d’une vidéo.

Voici à quoi ressemblera le widget, cliquez sur le lien pour voir la fenêtre contextuelle avec effet lightbox.



Vidéo Vimeo avec lecture automatique en tant que lien texte


Vidéo Vimeo sans lecture automatique en tant que lien texte


Cliquez sur l’image ci-dessous pour voir la fenêtre contextuelle de la vidéo YouTube.

YouTube, Vimeo Video Lightbox Popup pour Weebly

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails