google web designer video banner

The Video component

The Video component lets you embed a video in your project and add interactive features.

To display a YouTube video, use the YouTube component instead.

This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.

To add the Video component to your project:

Open the Components panel, then the Media folder.
Drag the Video component to the stage. If you're building an ad, you can also use the File > Import assets... command and skip the next step.
In the Video properties section of the Properties panel, enter the video source file URL in the Sources field. If the video source file is local, click the Browse button in the field to select the video from your computer file system.
To make your video interactive, you can add hotspots or cue points. Double-click the Video component on the stage to open the Interactive Video dialog.
- Hotspots appear over the Video component during specified times.
- Cue points let you tie events to specific times during video playback.

Video on mobile browsers

Mobile browsers may disable video autoplay to keep users from incurring data charges for unrequested content. The best practice for mobile browsers is to turn off autoplay and to turn on video controls instead.

In the Properties panel, make these changes:

Uncheck the Autoplay box.
Check the Show controls box.

Interactive Video dialog

The Interactive Video dialog lets you preview the video, as well as set hotspots and cue points. The dialog includes a video timeline, so you can see when hotspots and cue points occur. Hotspots are only visible in the video preview when the playhead is between the hotspot's starting and ending times.

Interactive video: how to create cue points and hotspots

Interactive Video dialog controls

Below the video preview, you can use the following buttons to control video playback and the playhead position:

You can also edit the current video play time directly by clicking the time in yellow and entering a new time in seconds.

Add a cue point

If the video timeline playhead is where you want to add the cue point, click the Create cue point button below the video. Otherwise, right-click the video timeline and select Add cue point from the pop-up menu.
A cue point marker appears above the video timeline.
You can edit the cue point ID in the Properties panel on the right, or by right-clicking the cue point and selecting Edit id....
To adjust the cue point time, drag the cue point marker along the video timeline or enter a new time in the Properties panel. Cue points must be at least half a second apart from each other.

You can now reference the cue point in events and actions after you close the dialog.

Delete a cue point

Right-click the cue point marker and select Delete.

Add a hotspot

Move the timeline playhead to where you want to add a hotspot.
Click the + Hotspot button to the left of the video timeline. A new hotspot track appears under the video timeline.
In the Properties panel on the right, select the asset you want to display as the overlay.
- Skip this step if you want the hotspot to be transparent.
- If you use a video asset, the video will start playing automatically without controls when the hotspot is shown.
Adjust the hotspot's position, size, and timing.
- By default, the hotspot shows during the entire duration of the video, including before the video playback starts and after playback ends.
- You can make changes in the Properties panel or drag the hotspot itself, the hotspot resize handles, and the hotspot bar in the video timeline.

To react to the user clicking the hotspot, set up an event that detects Mouse > click after you close the dialog.

Hotspots don't work in fullscreen videos.

Delete a hotspot

Click the X next to the hotspot ID left of the video timeline.

Properties

Video component properties

The Video component properties are visible in the Properties panel. (You must exit the Interactive Video dialog.)

Property	Description
Name	The component name.
Autoplay	When selected, your video plays automatically when the page loads. Not supported on all mobile browsers.
Loop	When selected, the video playback repeats continuously.
Mute	When selected, the video playback starts muted.
Controls	When selected, the video player displays a standard video control bar.
Sources	The video source URL. You can include multiple sources for different formats by separating the URLs with commas. Can be bound to dynamic data.
Poster	The URL of a poster frame to display until the user plays or seeks the video. Can be bound to dynamic data.

Cue point properties

You can see and edit cue point properties when you're in the Interactive Video dialog.

Property	Description
ID	The cue point ID.
Time	The time in seconds when the cue point is set. Can be bound to dynamic data.

Hotspot properties

You can see and edit hotspot properties when you're in the Interactive Video dialog.

Property	Description
ID	The hotspot ID.
Left	The left position of the hotspot as a percentage of the Video component width. Can be bound to dynamic data.
Top	The top position of the hotspot as a percentage of the Video component height. Can be bound to dynamic data.
Width	The width of the hotspot as a percentage of the Video component width. Can be bound to dynamic data.
Height	The height of the hotspot as a percentage of the Video component height. Can be bound to dynamic data.
Show time	The time in seconds when the hotspot becomes visible. Not applicable if Show before playback is selected. Can be bound to dynamic data.
Show before playback	Whether the hotspot is displayed before video playback begins.
Hide time	The time in seconds when the hotspot stops being visible. Not applicable if Show after playback is selected. Can be bound to dynamic data.
Show after playback	Whether the hotspot continues to display after video playback ends.
Asset	The image, video, or group to display as the overlay. Can be bound to dynamic data.
Scaling	If the asset is an image, the scaling method to use if the hotspot and asset dimensions differ: Resize image to fit - The image is scaled as large as possible within the element without cropping or stretching. Crop image to fill - The image is scaled as large as possible to fill the hotspot's space without stretching the image. Images with different proportions than the hotspot are cropped either vertically or horizontally.

Events and actions

Learn how to configure events.

Events

Events sent by the Video component

You can trigger other actions based on the following Video component events:

Event	Description
Play after pause	Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.
Paused	Sent when playback is paused.
Playing	Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).
Ended	Sent when playback completes.
Volume change	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
Seeked	Sent when a seek operation completes.
Buffering	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

To select one of these events in the Event dialog, set the Video component as the target.

Events sent by cue points

If you add a cue point to a video, you can trigger other actions based on the following cue point event:

Event	Description
Cue point reached	Sent when playback of the media has reached a time defined in a cue point.

To select this event in the Event dialog, set the cue point as the target.

Events sent by hotspots

If you add a hotspot to a video, you can trigger other actions based on the following hotspot events:

Event	Description
Hotspot shown	Sent when the hotspot becomes visible.
Hotspot hidden	Sent when the hotspot is hidden.

To select one of these events in the Event dialog, set the hotspot as the target.

Actions

Actions performed by the Video component

The following Video component actions can be triggered in response to other events:

Action	Configuration options
Toggle mute	none
Pause	none
Play	none
Replay	none
Seek	Time - The time in seconds to skip to.
Set Volume	Set Volume (0-100) - The volume of the video as a percentage.
Set Sources	Sources - The source URLs for different formats, separated by commas.

When you select one of these actions in the Event dialog, set the Video component as the receiver.

Actions performed by cue points

If you add a cue point to a video, the following cue point actions can be triggered in response to other events:

Action	Configuration options
Seek cue point	none
Set cue point time	Time - The time in seconds.

When you select one of these actions in the Event dialog, set the cue point as the receiver.

Actions performed by hotspots

If you add a hotspot to a video, the following hotspot actions can be triggered in response to other events:

Action	Configuration options
Change visibility	Show hotspot - Make the hotspot visible. Uncheck this box to hide the hotspot instead.
Seek show time or hide time	Seek show time - Seek the hotspot's show time. Uncheck this box to seek the hotspot's hide time instead. This action is best used for hotspots that show before or after playback, since the effect during playback is only momentary.
Set times	Show time - The time when the hotspot should become visible. Hide time - The time when the hotspot should be hidden.

When you select one of these actions in the Event dialog, set the hotspot as the receiver.

Preview

You can preview the video in the Interactive Video dialog by double-clicking the Video component on the stage. The preview in the dialog doesn't fully render hotspots that include animation.

To preview the component along with other elements in your document, or to test any events, exit the Interactive Video dialog and click the Preview button at the upper right corner.

Was this helpful?

How can we improve it?