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.

Install the component

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.

1. Download the Video Cue Point component. (You don't need to unzip the file).
2. In Google Web Designer, click the button at the bottom of the Components panel.
3. Select the .zip file you downloaded and click "Open".

Learn more about installing and removing custom components in Google Web Designer

Use the component

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:

1. Add a video to your creative. Get your video's ID from the ID field in the Properties panel.
2. 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.

Component properties

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.

Demo walkthrough

To get started, install the component, download the template, open the template in Google Web Designer, then follow along.

1. Edit the cue point images.
   In the template, open the Expanded page. You'll find three divs (cuePoint1, cuePoint2, 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.

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

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

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

5. Add your product overlay images.
   Next, update the images in each of the product overlay divs (panel1, panel2, panel3).

6. Customize other images and styles.
   Customize the rest of the creative, then preview your changes.

Events

Events are how you connect a physical gesture from your user to a recorded action in your ad.