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.

w-700 modal-image

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

w-600 modal-image

Tool

Icon

Description

Move

img-md
w-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

img-md
w-25

Opens the Edit Video page, where you can change the properties of the video and container.

Hide

img-md
w-25

Hides the current video.

Show

img-md
w-25

Shows the hidden video.

Duplicate

img-md
w-25

Makes a copy of the video.

Remove

img-md
w-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

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.
In the Commerce Admin, return to the Page Builder workspace where you want to add the video.

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

img-md
w-600 modal-image

Hover over the video container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
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.
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.
In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Change video settings

Hover over the video container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
Modify the settings according to the following sections:
- Basic
- Advanced
In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Basic video settings

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
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.
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

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:

img-md
w-600 modal-image

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

Hover over the video container to display the toolbox and choose the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) icon.

img-md
w-500 modal-image

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

img-md
w-500 modal-image

Remove a video from the stage

Hover over the video container to display the toolbox and choose the Remove ( ) icon.
When prompted to confirm, click OK.

recommendation-more-help

85b60248-86a4-4d5f-9933-5179643f608d