This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads or image ads.
The YouTube component lets you place a YouTube video in your ad.
To add the YouTube component to your project:
- Open the Components panel, then the Media folder.
- Drag the YouTube component to the stage.
- In the YouTube properties section of the Properties panel, enter the YouTube video page's URL in the URL field.
Using YouTube video with mobile browsers
Mobile browsers may disable YouTube video auto-play to keep users from incurring data charges for unrequested content. The best practice for mobile browsers is to turn off auto-play and to turn on video controls instead. This ensures that your video will work the way that you intend it to.
In the Properties panel, make these changes:
- Set Autoplay to none.
- Set Controls to autohide.
Properties
Property | Description |
---|---|
Name | The component name. |
URL | The URL for the YouTube video that you want to show. The unique ID found in the URL is also valid. Can be bound to dynamic data. |
Auto-play |
Sets whether the video starts playing automatically. Auto-play is not supported on all mobile browsers.
|
Preview duration | The preview duration (only used when Auto-play is set to preview or intro). By default, 30 seconds. |
Controls |
Whether controls are displayed.
|
Progress bar colour | Whether the progress bar for the video player is red or white. |
Mute | When selected, the YouTube video starts muted. |
Related | When selected, shows related YouTube videos that may be from other channels when the original video is finished. Untick this option to show related YouTube videos only from the same channel as the original video. |
Loop | When selected, the YouTube video repeats continuously. |
Pause on video end | When selected, this pauses the YouTube video when there is one second left. |
Start position | The starting position, in seconds, of the YouTube video. Can be bound to dynamic data. |
Advanced properties
Click the expand icon next to Advanced properties in the component properties pane to edit the following advanced properties:
Property | Description |
---|---|
Allow full screen on desktop | Enables fullscreen viewing for users on desktops. |
Extra player parameters | YouTube player parameters to include. Separate multiple parameters with ampersands (& ). |
Events and actions
Events sent by the YouTube componentYou can trigger other actions based on the following YouTube component events:
Event | Description |
---|---|
Buffering | Sent when the YouTube video is buffering. |
Ended | Sent when the YouTube video has reached the end. |
Paused | Sent when the YouTube video is paused. |
Playing | Sent when the YouTube video starts playing. |
Replayed | Sent when the YouTube video has been replayed. |
Started | Sent when 0% of the YouTube video has been viewed. |
First quartile | Sent when 25% of the YouTube video has been viewed. |
Midpoint | Sent when 50% of the YouTube video has been viewed. |
Third quartile | Sent when 75% of the YouTube video has been viewed. |
Complete | Sent when 100% of the YouTube video has been viewed. |
Preview started | Sent when 0% of the preview has been viewed. |
Preview first quartile | Sent when 25% of the preview has been viewed. |
Preview midpoint | Sent when 50% of the preview has been viewed. |
Preview third quartile | Sent when 75% of the preview has been viewed. |
Preview complete | Sent when 100% of the preview has been viewed. |
To select one of these events in the Event dialogue, set the YouTube component as the target.
Find out how to track these events in Studio.
The following YouTube component actions can be triggered in response to other events:
Action | Configuration options |
---|---|
Toggle mute | none |
Pause | none |
Play after pause | none |
Replay | none |
Seek | Time – The time in seconds to skip to. |
Set YouTube video ID |
|
When you select one of these actions in the Event dialogue, set the YouTube component as the receiver.
Learn how to configure events.
Preview
This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper-right corner.