DocumentationCommercePage Builder

Media - Video

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the Video content type to add a video that is hosted on YouTube or Vimeo to the Page Builder stage. It’s easy to embed video in a page or block or in product and category descriptions.

Video on the storefront home page {width="700" modal="regular"}

NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Video toolbox

Video toolbox {width="600" modal="regular"}

Tool
Icon
Description
Move
Move icon {width="25"}
Moves the video to another position on the stage.
(label)
Video
Identifies the current content container as a video. Hover over the image container to see the toolbox.
Settings
Settings icon {width="25"}
Opens the Edit Video page, where you can change the properties of the video and container.
Hide
Hide icon {width="25"}
Hides the current video.
Show
Show icon {width="25"}
Shows the hidden video.
Duplicate
Duplicate icon {width="25"}
Makes a copy of the video.
Remove
Remove icon {width="25"}
Deletes the video from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add a video

  1. Before you begin, navigate to the YouTube or Vimeo video that you want to embed, and copy the link.

    As an alternative, you can also copy a direct link to a valid video file. See Basic video settings for valid links.

  2. In the Commerce Admin, return to the Page Builder workspace where you want to add the video.

  3. In the Page Builder panel, expand Media and drag a Video placeholder to the stage.

    Dragging a video placeholder to the stage {width="600" modal="regular"}

  4. Hover over the video container to display the toolbox and choose the Settings ( Settings icon {width="20"} ) icon.

  5. For Video URL, paste the URL of the video that you copied.

    The URL of the Page Builder video that is used in this example is: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. To limit the Maximum Width of the video, enter the maximum width in pixels.

    If blank, the video is as wide as allowed by the container, allowing for margins and padding.

  7. In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Change video settings

  1. Hover over the video container to display the toolbox and choose the Settings ( Settings icon {width="20"} ) icon.

  2. Modify the settings according to the following sections:

  3. In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Basic video settings

  1. To change the current video, update the Video URL.

    Enter a valid video URL. Valid video URLs can be links to:

    • YouTube videos: https://youtu.be/CoDhMRUUjeI
    • Vimeo videos: https://vimeo.com/190156113
    • Valid video files (.mp4 is recommended): https://myvideos.com/spiral.mp4

  2. To change the width that is allowed for the video in the storefront, enter the new Maximum Width in pixels.

    If blank, the video extends the full width of the container, less allowance for margins and padding.

  3. To auto-start the video after the page loads, set Autoplay to Yes.

    If Autoplay is set to Yes, the video is muted on playback according to policy. However, even with this setting, mobile devices cannot autoplay your videos. For more information about these policies, refer to the following developer resources:

    If Autoplay is set to No, the video plays on user demand only.

Advanced

  1. To control the horizontal positioning of the video within the container, choose an Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Description
    Default Applies the alignment default setting that is specified in the style sheet of the current theme.
    Left Aligns the content along the left border of the video container, with allowance for any padding that is specified.
    Center Aligns the content in the center of the video container, with allowance for any padding that is specified.
    Right Aligns the content along the right border of the video container, with allowance for any padding that is specified.

  • Set the Border style that is applied to all four sides of the video container:

    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 Applies the default border style that is specified by the associated style sheet.
    None Does not provide any visible indication of the container borders.
    Dotted The container border appears as a dotted line.
    Dashed The container border appears as a dashed line.
    Solid The container border appears as a solid line.
    Double The container border appears as a double line.
    Groove The container border appears as a grooved line.
    Ridge The container border appears as a ridged line.
    Inset The container border appears as an inset line.
    Outset The container border appears as an outset line.

  • If you set a border style other than None, complete the border display options:

    Border Color {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
    Border Width Enter the number of pixels for the border line width.
    Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

  • (Optional) Specify the names of CSS classes from the current style sheet to apply to the video container.

    Separate multiple class names with a space.

  • Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the video container.

    Enter each corresponding value in the video container diagram.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container area Description
    Margins The amount of blank space that is applied to the outside edge of all sides of the container.
    Padding The amount of blank space that is applied to the inside edge of all sides of the container.

Move a video

  1. Hover over the video container to display the toolbox and choose the Move ( Move icon {width="20"} ) icon.

    Moving a video {width="500" modal="regular"}

  2. Select and drag the video to the new position, just below the red guideline.

    Using the red guideline to place the video {width="500" modal="regular"}

Remove a video from the stage

  1. Hover over the video container to display the toolbox and choose the Remove ( Remove icon ) icon.

  2. When prompted to confirm, click OK.

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