Search
Clear search
Close search
Google apps
Main menu

Teaser Reels component

Teaser Reels is an HTML5 custom element for silently autoplaying videos in DoubleClick Studio rich media creatives.  Teasers give viewers an engaging preview of a video's content to encourage them to watch the full video with sound. Mobile operating systems like Apple's iOS often ignore the autoplay attribute on the standard HTML5 <video> element. Teaser Reels extends the HTML5 <video> element, and allows you to play up to 30 seconds of a silent video preview. When you click or tap on the teaser video, the full video is played. The initial autoplaying video and any loops aren’t counted as video views.

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. If you use a different HTML editor, use the Teaser Reels custom element instead.

  1. Download the Teaser Reels 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.

Component properties

Property Description
Name Sets the name of the component.
Loop When selected, both the full video and the teaser video will repeat.
Poster Sets a poster image to display while the teaser is loading and when the teaser playback ends (when loop isn't set), or if the quality of the autoplay is too poor.
The poster image does not automatically resize when you change the size of the component on the stage. Use a poster image that is the same size as the component.
Source

Set a single source video to use.

Google Web Designer supports all video types supported in the HTML5 video specification, including .mp4, .ogg/.ogv, and .webm formats.
Teaser duration

Sets the length of the teaser video, in seconds. The value must be greater than 0 and less than 30. Values with decimals will be automatically rounded to the nearest whole number.

Teaser source

The filename to use for creating the teaser video. This should match the source filename, but don't include any of the source path.

For example, if you set the Source to: http://s0.2mdn.net/ads/gwd/placeholder_video.mp4

Set the Teaser source to:
placeholder_video.mp4

Controls When selected, shows controls when the full video plays.
Teaser play on expand When selected, wait for the creative to expand before playing the teaser and stop playing when the creative collapses.

Events

Events are how you connect a physical gesture from your user to a recorded action in your ad. The Teaser Reels component sends the following events, which can be used to trigger other actions:

  • Video Teaser Clicks 
  • Video Teaser Loops
  • Video Teaser Quartile 1
  • Video Teaser Quartile 2
  • Video Teaser Quartile 3
  • Video Teaser Quartile 4
  • Video Teaser Start
  • Video Teaser Stop
Record custom video percent played events
  1. Right-click the video teaser on the stage and select "Add event..."
    1. Target - Choose Teaser Reels > Video Teaser Quartile 1.
    2. Action - Choose Google Ad > Increment counter.
    3. Receiver - Click gwd-ad, then enter a name to use for the counter in your campaign report, such as "Video Teaser Quartile 1".
  2. Click Save.
  3. Repeat the steps above for each quartile you want to record.
Record the total amount of time the teaser played

To record the total amount of time the video teaser plays, connect the "Video Teaser Start" and "Video Teaser Stop" events to "Start timer" and "Stop timer" actions.

To connect teaser start and stop events with a timer:

  1. Right-click the video teaser on the stage and select "Add event..."
    1. Target - Choose Teaser Reels > Video Teaser Start.
    2. Action - Choose Google Ad > Start timer.
    3. Receiver - Click gwd-ad, then enter a name to use for the timer in your campaign report, such as "Teaser timer".
  2. Click Save.
  3. Repeat the steps above, choosing the target Video Teaser Stop and the action Stop timer.

Preview and testing

Components can't be previewed inside the Google Web Designer interface. To preview the teaser video, your creative must first be uploaded to Studio.

When you first upload a video to Studio, it will take 3-5 minutes to transcode. Transcoding must be completed before the video can be previewed.

If your video isn't working, check when it was uploaded to Studio. Teaser Reels requires transcoded video files in order to work. Automatic video transcoding was enabled on March 17, 2015. If your file was uploaded before this date, you can rename the video in Asset Library to get transcodes generated for your file.
When previewing in Internet Explorer, in some cases the video may have black bars above and below it (also known as "letterboxing"). This is because IE doesn't support the CSS object-fit property yet. To remove the letterboxing, set the component to the same size as the source video, or use a size with the same aspect ratio.

Ensuring high quality playback

Playback performance depends on the browser and device hardware the video is playing on. When the video first loads, there will be an initial 1-3 second testing phase where the hardware is benchmarked to determine whether full teaser play is supported.

If the benchmark results are too low to support high quality playback, the poster image is displayed instead. The poster image is also displayed any time during the video teaser playback if the video frame rate falls below a certain threshold, such as when viewing with a poor network connection.

Supported devices and browsers

Teaser Reels works on most modern browsers and platforms.

  • MRAID 2.0-compliant SDK environments
  • Desktop Safari, Internet Explorer 10+, Chrome, and Firefox
  • Safari and Chrome on iOS 8+ devices less than 2 years old (for example, iPhone 5C and iPhone 6)
  • Chrome on Android devices less than 2 years old
Was this article helpful?
How can we improve it?