Le bloc Pop-up Vidéo vous permet d'intégrer du contenu vidéo de YouTube, Vimeo ou d'une source auto-hébergée sur n'importe quelle page SeedProd. Contrairement à un lecteur intégré standard, le bloc prend en charge le mode lightbox, une vidéo fixe qui suit les visiteurs lorsqu'ils font défiler la page, et une superposition d'image qui agit comme une miniature personnalisée — vous donnant un contrôle total sur la manière dont les visiteurs découvrent et interagissent avec votre vidéo.
Que vous présentiez une démo de produit, un témoignage ou une vidéo explicative, le bloc Pop-up Vidéo offre des options de lecture avancées — y compris la lecture automatique, la mise en sourdine, la répétition, le mode de confidentialité et une fonctionnalité de vidéo teaser — afin que vous puissiez adapter l'expérience de visionnage pour correspondre aux objectifs de votre page et aux préférences de votre public.
Ajouter le bloc Pop-up Vidéo à vos pages
Suivez ces étapes pour ajouter un bloc Pop-up Vidéo à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Pop-up Vidéo dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Pop-up Vidéo pour ouvrir ses paramètres. Dans l'onglet Contenu, les paramètres sont organisés en quatre sections.
Vidéo :
- Source : Choisissez votre source vidéo — YouTube, Vimeo ou Personnalisé (pour les fichiers vidéo auto-hébergés ou hébergés à l'extérieur).
- URL YouTube (YouTube uniquement) : Entrez l'URL complète de la vidéo YouTube.
- URL Vimeo (Vimeo uniquement) : Entrez l'URL complète de la vidéo Vimeo. Remarque : La vidéo fixe nécessite un compte Vimeo Starter, Standard, Advanced, Plus, Pro, Business, Premium ou Enterprise.
- URL externe / URL vidéo personnalisée (Personnalisé uniquement) : Activez URL externe pour lier un fichier vidéo hébergé, ou entrez l'URL directe de votre vidéo. Vous pouvez également utiliser Sélectionner une vidéo personnalisée pour choisir un fichier dans votre médiathèque.
- Heure de début : Spécifiez une heure (en secondes) à laquelle la vidéo doit commencer à jouer.
- Heure de fin : Spécifiez une heure (en secondes) à laquelle la vidéo doit s'arrêter.
Options vidéo :
- Lecture automatique : Démarrez automatiquement la vidéo lorsque la page se charge.
- Lecture sur mobile : Lisez la vidéo en ligne sur les appareils mobiles au lieu de passer automatiquement en mode plein écran.
- Mettre en sourdine : Démarrez la vidéo en sourdine pour éviter de perturber l'expérience du visiteur.
- Répétition : Répétez la vidéo en continu lorsqu'elle atteint la fin.
- Afficher les contrôles du lecteur : Affichez ou masquez les contrôles de lecture du lecteur vidéo.
- Mode de confidentialité : Lorsqu'il est activé, YouTube et Vimeo ne stockeront pas les informations des visiteurs à moins qu'ils ne lisent activement la vidéo.
- Chargement différé : Retardez le chargement de la vidéo jusqu'à ce qu'elle devienne visible dans la fenêtre d'affichage pour améliorer la vitesse de chargement de la page.
- Titre d'introduction / Portrait d'introduction / Byline d'introduction (Vimeo uniquement) : Activez l'affichage du titre de la vidéo, du portrait de l'auteur et de la byline de l'auteur présentés dans l'introduction Vimeo.
- Couleur des contrôles (Vimeo uniquement) : Définissez la couleur des contrôles du lecteur Vimeo.
- Choisir une image : Sélectionnez ou téléchargez l'image de superposition depuis votre médiathèque.
- Afficher le bouton de téléchargement (Personnalisé uniquement) : Affiche un bouton de téléchargement sur le lecteur vidéo personnalisé.
- Préchargement (Personnalisé uniquement) : Définissez comment la vidéo se charge au chargement de la page — Métadonnées (charge uniquement les informations vidéo), Auto (charge la vidéo complète) ou Aucun.
- Affiche : Définissez une image d'affiche qui s'affiche avant le début de la lecture de la vidéo.
- Activer la vidéo fixe : Lorsqu'elle est activée, le lecteur vidéo se fixe dans un coin de l'écran lorsque les visiteurs défilent, gardant la vidéo visible tout au long de la page.
Vidéo d'aperçu :
- Activer la vidéo d'aperçu : Remplacez la miniature statique par une courte vidéo d'aperçu en boucle qui se lit silencieusement sur la page. Lorsqu'un visiteur clique dessus, la vidéo complète s'ouvre. Remarque : L'activation de cette option désactive la fonctionnalité de superposition d'images.
- Icône de lecture de la vidéo d'aperçu : Choisissez l'icône affichée sur la vidéo d'aperçu pour indiquer qu'elle est cliquable.
- Taille de la police de l'icône : Définissez la taille de l'icône de lecture de l'aperçu.
- Afficher la bannière : Affiche une bannière sur la vidéo d'aperçu (par exemple, une invite « Cliquez pour entendre l'audio »). Configurez le texte de la bannière, la couleur d'arrière-plan, la couleur du texte, la typographie et l'icône.
Superposition d'images :
- Activer la superposition d'images : Remplacez la miniature vidéo par défaut par une image personnalisée. Les visiteurs cliquent sur l'image pour ouvrir la vidéo. Remarque : L'activation de cette option désactive la fonctionnalité de vidéo d'aperçu.
- Choisir l'image : Sélectionnez ou téléchargez l'image de superposition depuis votre médiathèque.
- Taille de l'image : Définissez la largeur et la hauteur de l'image de superposition en pixels ou en pourcentage.
- Afficher l'icône de lecture : Activez ou désactivez l'icône de lecture qui apparaît sur l'image de superposition.
- Taille de la police de l'icône : Définissez la taille de l'icône de lecture affichée sur l'image de superposition.
- Opacité de l'icône : Définissez la transparence de l'icône de lecture (échelle de 0 à 10).
- Couleur de l'icône : Définissez la couleur de l'icône de lecture sur l'image de superposition.
- Activer la lightbox : Lorsqu'elle est activée, cliquer sur l'image de superposition ouvre la vidéo dans une superposition de type lightbox au lieu de la lire en ligne.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc de fenêtre vidéo.
Styles :
- Largeur : Définissez la largeur du lecteur vidéo en pourcentage de son conteneur à l'aide d'un curseur.
- Ratio d'aspect : Choisissez le ratio d'aspect du lecteur vidéo — 1:1, 3:2, 4:3, 9:16, 16:9 ou 21:9.
- Alignement : Définissez l'alignement horizontal du lecteur vidéo — Gauche, Centre ou Droite — avec des contrôles par appareil pour ordinateur, tablette et mobile.
- Ombre : Appliquez une ombre portée au lecteur vidéo à l'aide de tailles prédéfinies — Aucune, Fine, Petite, Moyenne, Grande, Très grande ou 2X grande.
Espacement :
- Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
Effets d'animation :
- Effet de défilement : Appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc Vidéo Pop Up et la personnalisation de son apparence, assurez-vous d'enregistrer votre travail.
Vous avez ajouté avec succès un bloc Vidéo Pop Up à votre page ! Avec la prise en charge de YouTube, Vimeo et de vidéos auto-hébergées, ainsi que des superpositions d'images, des aperçus teaser, une lecture fixe et des modes lightbox, ce bloc vous offre tout ce dont vous avez besoin pour créer une expérience vidéo attrayante. Expérimentez avec les options de lecture et les paramètres de superposition pour trouver la combinaison qui captera le mieux l'attention de vos visiteurs.