Media - Video

Utilisez la variable Vidéo type de contenu pour ajouter une vidéo hébergée sur YouTube ou Vimeo à la fonction Page Builder étape. 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 à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour 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 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
Icône Supprimer {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 au YouTube ou Vimeo vidéo à 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 les liens valides.

  2. Dans le Commerce Admin, revenez au Page Builder espace de travail dans lequel vous souhaitez ajouter la vidéo.

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

    Glissement d’un espace réservé de vidéo vers la scène {width="600" modal="regular"}

  4. Passez la souris sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’option 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 variable Page Builder La vidéo utilisée dans cet exemple est : https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Pour limiter la variable Maximum Width de la vidéo, saisissez 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 au Page Builder workspace.

Modification des paramètres vidéo

  1. Passez la souris sur le conteneur vidéo pour afficher la boîte à outils et sélectionnez l’option 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 au Page Builder workspace.

Paramètres vidéo de base

  1. Pour modifier la vidéo active, mettez à jour la variable 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 vidéo : https://vimeo.com/190156113
    • Fichiers vidéo valides (.mp4 est 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 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 une fois la page chargée, définissez Autoplay to 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 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 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 la variable Border style 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 des bordures :

    Couleur de la 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 des CSS classes de la feuille de style actuelle à appliquer au conteneur vidéo.

    Séparez plusieurs noms de classe par un espace.

  • Saisissez des valeurs, en pixels, pour la variable 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 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’option 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’option Supprimer ( Icône Supprimer ).

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

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