Comment afficher des boutons (ou CTA) à des moments précis lors de la lecture d'une vidéo HTML dans Divi

Les vidéos sont des outils marketing efficaces pour un site Web. Et si une vidéo cherche à promouvoir et à vendre des produits ou des services en ligne, elle doit inclure un appel à l'action clair pour les clients potentiels. Un moyen simple de fournir un appel à l'action consiste à inclure un bouton près de la vidéo sur lequel ils peuvent cliquer. Cependant, certains boutons (ou CTA) ont plus de sens pour apparaître à un moment précis lorsque l'utilisateur regarde la vidéo. Par exemple, il peut y avoir un segment de la vidéo (comme 20 secondes) où une certaine remise ou promotion est mentionnée. L'apparition d'un bouton « Obtenir maintenant » à ce moment précis peut être plus efficace.

Dans ce tutoriel, nous allons vous montrer comment faire apparaître des boutons (ou CTA) à des moments précis lors de la lecture d'une vidéo HTML dans Divi. Cette technique vous permettra d'utiliser des vidéos et des boutons conçus avec le Divi Builder, puis de faire apparaître ces boutons lorsque la vidéo atteint une heure précise, lorsque l'utilisateur met la vidéo en pause ou lorsque la vidéo se termine. Il suffit de quelques extraits de JQuery. Aucun plugin nécessaire pour celui-ci.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Remarquez comment le bouton du haut apparaît lorsque l'heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo se termine.

Ici, le même bouton du haut apparaît lorsque l'heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo est en pause.

Vous pouvez également consulter ce codepen pour une démonstration en direct de cette fonctionnalité.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment afficher un bouton à des moments précis lors de la lecture d'une vidéo dans Divi

Télécharger la mise en page de la page de destination du club de football

Pour démarrer rapidement la conception, nous allons utiliser la mise en page de la page de destination du club de football du pack de mise en page du club de football.

Pour ce faire, ouvrez le menu des paramètres, cliquez sur l'icône d'ajout à partir de la mise en page, recherchez et utilisez la mise en page de la page de destination du club de football.

Mettre à jour le module vidéo

Dans la partie supérieure de la page, vous trouverez une vidéo avec deux boutons dans la colonne de droite. Nous utiliserons ces éléments pour démontrer la fonctionnalité d'affichage de ces boutons lors de la lecture d'une vidéo.

Ouvrez les paramètres vidéo et téléchargez/ajoutez une vidéo au format de fichier MP4. Vous pouvez également inclure un fichier WEBM.

Sous l'onglet Avancé, attribuez à la vidéo un ID CSS personnalisé :

• ID CSS : divi-video-conteneur

Mettre à jour le bouton supérieur

Ensuite, ouvrez les paramètres du module de boutons au-dessus de la vidéo et mettez à jour l'option de transformation afin qu'elle déplace le bouton derrière la vidéo comme suit :

• Transformer Traduire l'axe Y : 100 %

Donnez ensuite au bouton la classe CSS suivante :

• Classe CSS : divi-delayed-button-1

Mettre à jour le bouton du bas

Ensuite, ouvrez les paramètres du module de boutons sous la vidéo et mettez à jour l'option de transformation afin qu'elle déplace le bouton vers le haut comme suit :

• Transformer l'axe Y de translation : -100 %

Donnez ensuite au bouton l'ID CSS suivant :

• ID CSS : divi-delayed-button-2

Comme nous n'avons pas besoin des animations qui ont été ajoutées aux boutons dans la mise en page prédéfinie, nous pouvons les supprimer. Utilisez la multisélection pour sélectionner les deux modules de boutons (dans la vue modale des couches). Ensuite, ouvrez les paramètres de l'un des modules de boutons et définissez le style d'animation sur aucun.

• Style d'animation : aucun

Ajouter le code

Pour la dernière étape, nous devons ajouter le code cust0m. Pour ce faire, ajoutez un module de code sous le bouton du bas.

Dans la zone de code des paramètres de code, collez le CSS suivant en veillant à envelopper le code dans les balises de style .

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

Ensuite, collez le code JQuery suivant après le CSS en veillant à envelopper le code dans les balises de script .

(function ($) {
  $(document).ready(function () {
    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });
  });
})(jQuery);

À propos du Code

Le CSS

Tout d'abord, nous masquons les boutons et définissons la durée de transition de l'animation des boutons.

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}

Ensuite, nous montrons le bouton lorsque la classe "show-button" est basculée via le JQuery et définissons la transformation sur none afin que le bouton revienne à son emplacement d'origine sur la page.

.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

Le JQuery

La première chose que nous faisons est de définir les variables que nous utiliserons.

    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

Ensuite, nous ajoutons l'événement timeupdate sur la vidéo avec une fonction afin que nous puissions déterminer dynamiquement l'heure actuelle de la vidéo pendant la lecture. Pour en savoir plus, lisez ici l'événement timeupdate.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

    });

À l'intérieur de la fonction, nous utilisons une instruction if pour afficher le bouton 1 (le bouton du haut) chaque fois que l'attribut currentTime de la vidéo est égal ou supérieur à 5 secondes.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

    });

REMARQUE : La condition de l'instruction if est e.target.currentTime >= 5, mais vous pouvez modifier cela pour afficher le bouton à un moment différent lors de la lecture de la vidéo. Par exemple, si vous souhaitez afficher le bouton lorsque le currentTime de la vidéo atteint 20 secondes, vous pouvez remplacer la condition par e.target.currentTime >= 20 .

Ensuite, nous utilisons une autre instruction if pour afficher le bouton 2 (le bouton du bas) chaque fois que la vidéo est en pause ou s'est terminée (en utilisant les propriétés HTMLMediaElement en pause et terminées.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });

Résultat final

Remarquez comment le bouton du haut apparaît lorsque l'heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo se termine.

Ici, le même bouton du haut apparaît lorsque l'heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo est en pause.

Vous pouvez également consulter ce codepen pour une démonstration en direct de cette fonctionnalité.

Dernières pensées

L'affichage d'un bouton basé sur l'heure actuelle d'une vidéo peut s'avérer utile pour la commercialisation de vos produits et services. Toute vidéo promotionnelle réussie mérite de toute façon un appel à l'action convaincant. Espérons que ce didacticiel vous permettra de mieux comprendre comment exploiter les fonctionnalités des vidéos HTML pour diffuser ces puissants CTA quand et où vous le souhaitez.

Si vous êtes intéressé par d'autres façons créatives d'utiliser des vidéos HTML dans Divi, voici quelques articles qui pourraient vous plaire :

• Comment créer des contrôles vidéo HTML personnalisés dans Divi
• Ajout d'effets 3D aux vidéos HTML5 pour afficher des animations de produits uniques dans Divi
• Comment créer une vidéo promotionnelle collante avec une bascule Afficher/Masquer dans Divi

J'ai hâte de vous entendre dans les commentaires.

À votre santé!