Search
Clear search
Close search
Google apps
Main menu
true

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 Image of add new component button in Google Web Designer 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.
The Video Cue Point component works with videos in both the YouTube and Video components in Google Web Designer.

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.

The Video Cue Point component doesn't work on iOS devices with small screens, because the video plays in fullscreen rather than on the webpage. See Apple's Safari HTML5 Audio and Video Guide for details.

Component properties

Component properties panel for the Video Cue Point component in Google Web Designer
Property Description
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:
gwd-youtube_1

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

Event Name Description
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.

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?