base-pause-nav-fullframe-card-v1

This template is used for pause ads: it shows a full-screen image over the paused video, with a small "continue watching" style card in the bottom-left corner so the viewer can easily resume playback. A close button in the top-right corner lets the viewer skip the ad instead and return to the paused stream.

Ad units

This template is used for pause ads: non-interactive breaks shown when the viewer pauses playback, rather than during a linear ad break. It stays on screen until the viewer either resumes or skips it.

Required parameters

A background ad image, shown full-screen behind everything else. This is the creative returned by the ad server, and is required. If the image cannot be loaded, the pause ad will not be shown.

Optional parameters

The URL to an advertiser's landing page, typically returned by the ad server as a click-through URL.
A card image - a small preview/thumbnail shown inside the resume card. If it isn't provided, the card still appears, just without a picture: only the caption and the resume button. This is typically used to show a poster of the main content being played.
A few pieces of text, all replaceable with your own wording, or hidden entirely:
- The small "Advert" label in the top-right corner
- The caption above the resume card (defaults to "Now playing", but could be set to the title of the stream)
- The label on the resume button itself (defaults to "Resume")
A highlight color to indicate what element has focus (for the resume and discard buttons).

It is expected that the ad creative and click-through URL will be provided by the ad server. The other optional information would be injected by the player when the creative is initialized, as described in https://developers.broadpeak.io/docs/client-side-implementation#content-metadata-overlay

Behavior

The background image always fills the whole ad space, cropped as needed to match whatever shape the video player actually is - it isn't locked to a particular aspect ratio. Typically you want to supply a 16x9 image to match the aspect ratio of the stream, in particular for display on TVs.
The resume card sits in the bottom-left corner. Its width can be adjusted; everything inside it (the caption, the preview image, and the resume button) scales to match.
If a card image is unusually tall, its height is capped so the card never grows off the top of the screen - the image is simply cropped to fit rather than being shrunk down to an awkward size.
When navigating with a TV remote or keyboard, whichever element currently has focus - the resume card or the close button - is clearly highlighted, so it's always obvious what will happen if the viewer presses select. The highlight color can be customized.
Clicking or tapping the resume card (or its button) resumes playback. Clicking the close button skips the ad. Clicking the background image itself can also take the viewer to the advertiser's landing page.
The ad label, close button, and resume card all fade in gently when the ad appears, rather than popping in abruptly.

Examples

Example 1: Minimal setup, no metadata

Result: Same full-screen background, but the resume card only shows the default "Resume" button - no caption, no thumbnail.

Example 2: Content metadata

{
  "cardImageUrl": "https://example.com/meridian-16x9.jpg",
  "nowPlayingText": "Meridian",
  "resumeText": "Continue",
  "adLabelText": ""
}

Result: A full-screen background image, with a resume card showing the preview thumbnail, captioned "Meridian", and a "Continue" button. The "Advert" label is hidden.

Example 3: Custom colors and wording

{
  "cardImageUrl": "https://example.com/meridian-poster.jpg",
  "adLabelText": "Publicité",
  "resumeText": "Reprendre",
  "nowPlayingText": "En cours",
  "highlightColor": "#FE9A58",
  "cardWidth": "15%"
}

Result: Narrower card, with poster image, and French wording throughout and an orange highlight for keyboard/remote focus instead of the default white.