DocumentationCommercePage Builder

Media - Video

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Débutant
  • Intermédiaire
  • Utilisateur ou utilisatrice

Utilisez le type de contenu Vidéo pour ajouter une vidéo hébergée sur YouTube ou Vimeo à la Page Builder scène. Il est facile d’incorporer des vidéos dans une page ou un bloc ou dans des descriptions de produits et de catégories.

Vidéo sur la page d’accueil du storefront

NOTE
Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils vidéo

Boîte à outils vidéo

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace la vidéo vers une autre position sur la scène.
(label)
Video
Identifie le conteneur de contenu actuel en tant que vidéo. Passez la souris sur le conteneur d’images pour afficher la boîte à outils.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Edit Video ​dans laquelle vous pouvez modifier les propriétés de la vidéo et du conteneur.
Masquer
Icône Masquer {width="25"}
Masque la vidéo en cours.
Afficher
Icône Afficher {width="25"}
Affiche la vidéo masquée.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de la vidéo.
Supprimer
Supprimer l’icône {width="25"}
Supprime la vidéo de la scène.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajout d’une vidéo

  1. Avant de commencer, accédez à la vidéo YouTube ou Vimeo que vous souhaitez incorporer et copiez le lien.

    Vous pouvez également copier un lien direct vers un fichier vidéo valide. Voir Paramètres vidéo de base pour consulter des liens valides.

  2. Dans l’administrateur Commerce, revenez à l’espace de travail Page Builder où vous souhaitez ajouter la vidéo.

  3. Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Video sur la scène.

    Glissement d’un espace réservé de vidéo vers l’étape {width="600" modal="regular"}

  4. Pointez sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( Icône Paramètres {width="20"} ).

  5. Pour Video URL, collez l’URL de la vidéo que vous avez copiée.

    L’URL de la vidéo Page Builder utilisée dans cet exemple est : https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Pour limiter l’ Maximum Width de la vidéo, entrez la largeur maximale en pixels.

    Si la vidéo est vide, elle est aussi large que le conteneur le permet, ce qui permet des marges et une marge intérieure.

  7. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Modification des paramètres vidéo

  1. Pointez sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( Icône Paramètres {width="20"} ).

  2. Modifiez les paramètres en fonction des sections suivantes :

  3. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Paramètres vidéo de base

  1. Pour modifier la vidéo active, mettez à jour le Video URL.

    Saisissez une URL de vidéo valide. Les URL de vidéo valides peuvent être des liens vers :

    • Vidéos YouTube : https://youtu.be/CoDhMRUUjeI
    • Vidéos Vimeo : https://vimeo.com/190156113
    • Fichiers vidéo valides (.mp4 recommandé) : https://myvideos.com/spiral.mp4

  2. Pour modifier la largeur autorisée pour la vidéo dans le storefront, saisissez le nouveau Maximum Width en pixels.

    Si la valeur est vide, la vidéo étend la largeur totale du conteneur, sans tenir compte des marges et de la marge intérieure.

  3. Pour démarrer automatiquement la vidéo après le chargement de la page, définissez Autoplay sur Yes.

    Si la lecture automatique est définie sur Yes, la vidéo est coupée lors de la lecture conformément à la stratégie. Toutefois, même avec ce paramètre, les périphériques mobiles ne peuvent pas lire vos vidéos automatiquement. Pour plus d’informations sur ces stratégies, reportez-vous aux ressources de développement suivantes :

    Si la lecture automatique est définie sur No, la vidéo est lue à la demande de l’utilisateur uniquement.

Advanced

  1. Pour contrôler le positionnement horizontal de la vidéo dans le conteneur, choisissez un Alignment :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Description
    Default Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
    Left Aligne le contenu le long de la bordure gauche du conteneur vidéo, en tenant compte de la marge intérieure spécifiée.
    Center Aligne le contenu au centre du conteneur vidéo, en tenant compte de la marge intérieure qui est spécifiée.
    Right Aligne le contenu le long de la bordure droite du conteneur vidéo, en tenant compte de la marge intérieure spécifiée.

  • Définissez le style Border appliqué aux quatre côtés du conteneur vidéo :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Description
    Default Applique le style de bordure par défaut spécifié par la feuille de style associée.
    None Ne fournit aucune indication visible des bordures du conteneur.
    Dotted La bordure du conteneur s’affiche sous la forme d’une ligne pointillée.
    Dashed La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés.
    Solid La bordure du conteneur s’affiche sous la forme d’une ligne pleine.
    Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
    Groove La bordure du conteneur s’affiche sous forme de ligne droite.
    Ridge La bordure du conteneur s’affiche sous la forme d’une ligne à droite.
    Inset La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion.
    Outset La bordure du conteneur apparaît comme une ligne de départ.

  • Si vous définissez un style de bordure autre que None, renseignez les options d’affichage de la bordure :

    Couleur de bordure {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
    Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
    Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.

  • (Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur vidéo.

    Séparez plusieurs noms de classe par un espace.

  • Entrez des valeurs, en pixels, pour que Margins and Padding indique les marges extérieures et la marge intérieure du conteneur vidéo.

    Saisissez chaque valeur correspondante dans le diagramme de conteneur vidéo.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Zone de conteneur Description
    Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur.
    Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur.

Déplacement d’une vidéo

  1. Passez la souris sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’icône Déplacer ( Icône Déplacer {width="20"} ).

    Déplacement d’une vidéo {width="500" modal="regular"}

  2. Sélectionnez la vidéo et faites-la glisser vers sa nouvelle position, juste en dessous de la ligne directrice rouge.

    Utilisation de la ligne directrice rouge pour placer la vidéo {width="500" modal="regular"}

Supprimer une vidéo de l’étape

  1. Passez la souris sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’icône Supprimer ( Supprimer l’icône ).

  2. Lorsque vous êtes invité à confirmer l’opération, cliquez sur OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d