DocumentationCommercePage Builder

[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Média - Vidéo

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

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 à Page Builder stage. 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 {width="700" modal="regular"}

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 {width="600" modal="regular"}

Outil
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Déplace la vidéo vers un autre emplacement sur la scène.
(libellé)
Video
Identifie le conteneur de contenu actuel en tant que vidéo. Pointez sur le conteneur d’image pour afficher la boîte à outils.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Edit Video, où vous pouvez modifier les propriétés de la vidéo et du conteneur.
Masquer
Icône Masquer {width="25"}
Masque la vidéo active.
Afficher
Afficher l’icône {width="25"}
Affiche la vidéo masquée.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de la vidéo.
Supprimer
Icône Supprimer {width="25"}
Supprime la vidéo de l’étape.
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, puis copiez le lien.

    Vous pouvez également copier un lien direct vers un fichier vidéo valide. Consultez la section Paramètres vidéo de base pour obtenir des liens valides.

  2. Dans l’Administration des 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 vers la scène.

    Faire glisser un espace réservé vidéo sur la scène {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. Par 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 la Maximum Width de la vidéo, saisissez la largeur maximale en pixels.

    Si elle est vide, la vidéo est aussi large que le permet le conteneur, ce qui permet d’ajouter 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.

Modifier les 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 actuelle, mettez à jour la 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 la nouvelle Maximum Width en pixels.

    Si elle est vide, la vidéo étend toute la largeur du conteneur, avec moins de marges et de 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 mise en sourdine lors de la lecture, conformément à la politique. Cependant, même avec ce paramètre, les appareils mobiles ne peuvent pas lire automatiquement vos vidéos. Pour plus d’informations sur ces politiques, consultez les 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 une 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 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 de 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 tirets.
    Solid La bordure du conteneur s’affiche sous la forme d’une ligne continue.
    Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
    Groove La bordure du conteneur s’affiche sous la forme d’une ligne rainurée.
    Ridge La bordure du conteneur s’affiche sous la forme d’une ligne crantée.
    Inset La bordure du conteneur s’affiche sous la forme d’une ligne insérée.
    Outset La bordure du conteneur s’affiche sous la forme d’une ligne de départ.

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

    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 Spécifiez la couleur en choisissant une nuance, 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) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur vidéo.

    Séparez plusieurs noms de classe par un espace.

  • Saisissez les valeurs, en pixels, du Margins and Padding pour spécifier 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 conteneur Description
    Margins Quantité d’espace vide appliqué au bord extérieur de tous les côtés du conteneur.
    Padding Quantité d’espace vide appliqué au bord intérieur de tous les côtés du conteneur.

Déplacer une vidéo

  1. Pointez 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 consigne rouge.

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

Suppression d’une vidéo de l’étape

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

  2. Lorsque vous êtes invité à confirmer, cliquez sur OK.

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