A template for the skin formats, that allows for the easy addition of a top banner with a repositionable video player. This template is used in conjunction with our Seamless Skin templates and selected Fluid Skin side-panel templates to enable sticky video behaviour.
Guide to skins
- The difference between our Seamless Skin & Fluid Skin formats
- The respective templates (i.e. Seamless Image Skin, Seamless Sliding Skin, Fluid Skin Image, Fluid Skin Video, etc.) within our Seamless & Fluid Skin formats
- Tips and best practice for using overlays
Examples
Recommended asset dimensions
Video: 1280x720 (16:9), MP4
Overlays: PNG or WEBP with transparent background. Dimensions are flexible, overlays should be designed true to size and then exported at 2x resolution.
Background Image (optional)
Image: 1280x180px* (JPG, WEBP)
Top Banner sizes vary across publishers and between countries, so please read carefully to ensure your assets are produced correctly.
For HTML5 Top Banners, the creative width must be responsive (width: 100%) up to a maximum width of 1280 pixels. The height will match the billboard height from the list below. If the width of your top banner is not responsive, there may be empty space visible between the top banner and side panels on some sites.
For top banner backgrounds, use a width of 1280 pixels. The height should match the billboard height from the list below, and all key content should appear within a centralised safe zone of the corresponding billboard width. eg, for a UK skin, the ideal asset size is 1280x250, with a centralised 970x250 safe zone. You may also wish to export your assets double sized (eg 2560x500), for sharper display on high resolution screens.
Billboard placement sizes by country:
- 🇦🇹 AUT: 1000x250px
- 🇨🇭 CHE: 1000x250px
- 🇩🇪 DEU: 1000x250px
- 🇩🇰 DNK: 930x180px
- 🇫🇮 FIN: 1000x400px
- 🇫🇷 FRA: 970x250px
- 🇮🇹 ITA: 1000x250px
- 🇲🇽 MEX: 970x250px
- 🇳🇱 NLD: 970x250px
- 🇳🇴 NOR: 980x300px
- 🇵🇱 POL: 970x250px
- 🇸🇪 SWE: 1000x240px
- 🇬🇧 GBR: 970x250px
Format description and guidance
The background image is optional, it can be used if a different background is required for the top banner compared to the skin background, otherwise it can be left blank.
The video can be positioned, to be either left, right, or centred within the banner. Depending on the option selected, the overlay will be centred within the available remaining space. Note: When paired with a supported Seamless Skin or Fluid Skin side-panel template, sticky video can be enabled by turning on the relevant Sticky Video Player setting in the wallpaper template.
The video controls (play, pause, unmute, progress bar) on the video can be enabled or disabled according to preference. The colour of the progress bar can also be customised. By default the video will fill the full height of the Top Banner, but padding can be added to make it smaller (use either pixel values, or responsive units such as vh).
If the video position is set to center, two smaller overlays will be used (one on each side of the video). Upload a second overlay into the "Overlay 2" parameter.
The overlay padding value allows you to add in or remove additional white space around the overlays.
Video Layout. Inset (the default) places the player in its own column alongside the overlays, sized to the video's own aspect ratio so the whole frame is always visible. Video Padding insets it from the banner edges and Video Border Radius rounds its corners.
Full Bleed instead lets the video cover the entire banner, edge to edge. It is a single-asset layout – the video is the creative. Overlay 1 and Overlay 2 are not rendered at all, Video Position has nothing left to arrange, and Video Padding, Video Border Radius and the Background Image have no visible effect because the player covers them. Anything that needs to sit over the video – logo, headline, legal text – has to be part of the video itself.
Full Bleed also crops where Inset does not. The video is scaled to cover the banner and whatever overflows is cut off, and billboard placements are very wide and short: a 16:9 master dropped into a 970x250 slot keeps only around 45% of its height, trimmed evenly from the top and bottom. Either supply a master cut for the placement's ratio, or keep faces, product and any burnt-in text well inside a central safe area.
Beyond the master Player Controls toggle above, the individual elements can be tuned: Play/Pause Button and Progress Bar can each be turned off on their own, Auto-hide Controls fades them away during playback so they do not sit over the picture, and Media Buttons Position and Media Buttons Colour move and tint them to suit the artwork underneath. All default to enabled, in the bottom left.
Max total file weight
1 MB
For best performance, all assets should be compressed and optimized to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Audio
Muted by default, user initiated.
Template Details
Skin Top with Sticky Streaming Video
General
| Parameter | Purpose |
|---|---|
| Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Video | Primary streaming video asset. | |
| Max Video Stream Weight | Sets the maximum allowed video stream weight when selecting encodes. | 1.5mb | choices: 3.5mb, 2.5mb, 1.5mb, 1.0mb |
| Video Position | Horizontal position of the video player within the banner. Ignored in the Full Bleed layout. | Left | choices: Left, Center, Right |
| Video Layout | Inset keeps the player at the video's own aspect ratio beside the overlays. Full Bleed scales the video to cover the whole top banner (cropping to fit); overlays, video padding and border radius are not applied. | Inset | choices: Inset, Full Bleed |
| Video Padding | Padding applied around the video player, as a CSS length. Ignored in the Full Bleed layout. | 0 |
| Video Border Radius | Rounds the corners of the video player, as a CSS length, e.g. 12px or 1em. Ignored in the Full Bleed layout. | 0 |
Player Controls
| Parameter | Purpose | Default |
|---|---|---|
| Player Controls | Enabled shows the media buttons and progress bar and lets the viewer unmute; playback always starts muted. Disabled plays the video silently with no controls and makes the whole player click-through. | Enabled | choices: Disabled, Enabled |
| Auto-hide Controls | Enabled fades the media buttons and progress bar out when the pointer leaves the video and back in when it returns, as the previous version of this template did. Disabled keeps them visible at all times. | Enabled | choices: Disabled, Enabled |
| Play/Pause Button | Adds a play/pause button beside the mute button. It pauses and resumes playback, and replays the video once it has finished looping. | Enabled | choices: Disabled, Enabled |
| Progress Bar | Thin progress bar along the bottom edge of the video. Tapping or dragging it scrubs the video. | Enabled | choices: Disabled, Enabled |
| Progress Bar Colour | Colour of the filled part of the progress bar. | #ff0000 |
| Media Buttons Position | Corner of the video where the media buttons (play/pause and mute) sit. | Bottom Left | choices: Bottom Left, Bottom Right, Top Left, Top Right |
| Media Buttons Colour | Icon colour of the media buttons. | #ffffff |
Overlays (optional)
| Parameter | Purpose | Default |
|---|---|---|
| Overlay | Image overlay displayed when video position is left or right. | |
| Overlay 2 (optional) | Second image overlay shown only when video position is centre. | |
| Overlay Padding | Padding applied around overlay assets. | 10vh |
Background (optional)
| Parameter | Purpose |
|---|---|
| Background Image | Background image displayed behind the video and overlays. |