Teaser Reels is an HTML5 custom element for silently autoplaying videos in 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 wraps 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.
- Download the Teaser Reels 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".
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: Set the Teaser source to: |
| 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
- Right-click the video teaser on the stage and select "Add event..."
- Target - Choose Teaser Reels > Video Teaser Quartile 1.
- Action - Choose Google Ad > Increment counter.
- Receiver - Click gwd-ad, then enter a name to use for the counter in your campaign report, such as "Video Teaser Quartile 1".
- Click Save.
- Repeat the steps above for each quartile you want to record.
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:
- Right-click the video teaser on the stage and select "Add event..."
- Target - Choose Teaser Reels > Video Teaser Start.
- Action - Choose Google Ad > Start timer.
- Receiver - Click gwd-ad, then enter a name to use for the timer in your campaign report, such as "Teaser timer".
- Click Save.
- 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, upload your creative to Studio and preview it there.
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.
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 11+, Chrome, and Firefox
- Safari and Chrome on iOS devices less than 2 years old
- Chrome on Android devices less than 2 years old