Video Cue Point component
The Video Cue Point component for Google Web Designer lets you display a customizable element during your video. When your video is showing a prime product view, add a cue point to highlight a product feature. Show text, images, or buttons during your set duration.
This component only works with Google Web Designer. Don't have Google Web Designer? Download it here. If you have a previous version installed, it will automatically be updated to the latest version.
- Download the Video Cue Point component. (You don't need to unzip the file).
- In Google Web Designer, click the button at the bottom of the Components panel.
- Select the .zip file you downloaded and click "Open".
After installation, drag the component to the stage to start using it in your creative. To customize, first select the component on the stage, then open the Properties panel and scroll down to Component properties.
Before you set up the component:
- Add a video to your creative. Get your video's ID from the ID field in the Properties panel.
- Paste the ID into the Video element ID field to assign the cue point to your video.
Using video with mobile browsers
Mobile browsers 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. This ensures that your video will work the way you intend it to.
|Name||Sets the cue point name.|
|Start time||Sets the time (in seconds) during the video that the cue point should appear. The default is 0 seconds, which means the cue point will appear as soon as the video plays.|
|Duration||Sets the length of time, in seconds, that the cue point will stay visible. The default is 10 seconds.|
|Video Element ID||The id of the video element to assign the cue point to, for example:
Show custom content during key moments of your video
In the demo, buttons appear in different sections of the video. Clicking these buttons expands a panel to display additional content. Below is a walkthrough of how to create this interaction with the Video Cue Point component.
Edit the cue point images.
In the template, open the Expanded page. You'll find three divs (
cuePoint3) that overlay the video. Each of these contain both an image and a tap area that appears during a set time in the video. If you wish, replace the cue point images with your own image.
Add your video.
Click the YouTube component on the stage and open the Properties panel. Paste your video's YouTube URL in the URL field.
Change the cue point timing.
On the left side of the stage, there are 3 components that hide and show the cue points at specific times in the video. Adjust the timing by clicking each component and changing the settings in the Properties panel.
Change the actions.
Open the Events panel. Each cue point has two actions already added. One action pauses the YouTube player, and one action shows the associated product image overlay when the cue point is clicked. If you add more cue points, add each of these actions if you want to use the same creative treatment.
Add your product overlay images.
Next, update the images in each of the product overlay divs (
Customize other images and styles.
Customize the rest of the creative, then preview your changes.
Events are how you connect a physical gesture from your user to a recorded action in your ad.
|show||Event dispatched when the video cue point is first shown, or when the user seeks to the point in the video that the cue point will be shown. For example, if a cue point will be shown in the last 30 seconds of a 1 minute video, seeking to any point after the 30 second mark will show the cue point and the show event will occur.|
|hide||Event dispatched when the cue point is hidden, either at the end of the duration set, or if the user seeks the video to a point past the cue point's set duration.|
Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.