A template for the Seamless Skin format, that allows for the easy creation of a responsive skin creative. You can use either an image or a video as a background. Overlays in the side panels are used to ensure branding and messaging are always visible. When used in conjunction with the Skin Top with Sticky Streaming Video top banner, it is possible to enable sticky video functionality, which keeps the video in view when the top banner is scrolled out of view.
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 default creative dimensions
Background
ONE of either:
- Image: 2560x1440px (JPG, PNG or WEBP)
- Video: 1920x1080px (MP4)
Overlays:
- Main overlays - Max size of 800x1440px (PNG or WEBP with transparent background), one asset for each side of the skin.
- Top/Bottom overlays - additional optional overlay elements that will be top/bottom aligned with the overlay container. Max size of 800x500px (PNG or WEBP with transparent background).
- For best results, export the overlay PNG assets without any excess empty space - the size and position of the overlay is configurable within the skin settings.
Sticky Video
- Sticky video will be automatically enabled when used in conjunction with the Skin Top with Sticky Streaming Video top banner
Format description and guidance
The background asset (image or video) covers the entire screen background. You can change the scaling mode to control the scaling behaviour.
- cover - The asset is scaled to cover the entire screen, without leaving any empty space. May appear cropped at the edges on some screens.
- contain - The asset is scaled to fit fully within the screen, without any cropping, possibly leaving empty space where a background colour will be visible.
- none - The image is not scaled, and appears at 100% its original size.
When using the "cover" or "contain" scaling modes, avoid placing any "key" elements (logos, messaging, CTA etc) on background assets, as they may be cropped on smaller screens. The "none" scaling mode can be used to disable responsive behaviour, and appear at a fixed size.
Use the overlays to add your static branding and messaging elements on top of the background. The overlays automatically scale and resize your content to fit within the available space, enabling responsive functionality for your skin. You can define the overlay container width & height (as a percentage of the total side-panel area) , as well as define minimum and maximum widths (in pixels) to constrain their scaling.
The main overlay is the primary overlay asset, which will fill as much space within the overlay container as is available. Optional top and bottom overlays can be added on each side, allowing for static branding elements such as logos and CTAs to be placed separately from the main overlay, allowing for more advanced responsive layouts. The top/bottom overlays will match the full overlay container width, and you can adjust their heights to control how big they will appear
You can additionally configure how the overlays are positioned within the skin side-panels. By default they are centered, however you can modify the horizontal and vertical alignment of the overlays using the preset positioning options, and add an offset to fine-tune the position (you can use any valid css unit eg 250px, 50%, 20vh etc, measured from the selected position edge).
For best results, export the overlay PNG assets without any excess empty space - this allows the template to handle the overlay scaling and placement more effectively.
The Top Banner of the skin should either be added as a separate image/video/HTML/template banner, or if scaling mode is set to "none", can be incorporated as part of the design of the background asset
To enable the sticky video behaviour, you must use the Skin Top with Sticky Streaming Video template for the top banner. You can choose which side of the screen the video should move to when you scroll down (left, right or both), as well as whether the video should be positioned at the top or the bottom of the screen.
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 should 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.
Billboard placement sizes by country:
- 🇦🇹 AT: 1000x250px
- 🇨🇭 CH: 1000x250px
- 🇩🇪 DE: 1000x250px
- 🇩🇰 DK: 930x180px
- 🇫🇮 FI: 1000x400px
- 🇫🇷 FR: 970x250px
- 🇳🇱 NL: 970x250px
- 🇳🇴 NO: 980x300px
- 🇵🇱 PL: 970x250px
- 🇸🇪 SE: 1000x240px
- 🇬🇧 UK: 970x250px
Top banner dimensions can also vary from publisher to publisher. Always confirm the exact sizes with the publishers on your plan before creating skin assets.
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building creatives using HTML5.
Diving Deeper into Responsive HTML5
Getting hands on with responsive HTML5
Max total file weight
3.5MB.
Videos: Files up to 50 MB are accepted, with a recommended maximum length of 20 seconds.
Images: Maximum 200kb each.
For best performance, all assets should be compressed and optimised to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Click tags and tracking
The Seamless Skin format supports two separate clickURL & trackers - one for the main skin body, and another for the top banner.
Audio
Muted by default, user initiated.
Template Details
Automatically synced on 2026-02-11T14:27:19.492Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Seamless Skin
Banner templates: Seamless Image & Streaming Video Skin, Seamless Image & Video Skin
Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.
Seamless Image & Streaming Video Skin
A simple image/video skin template for the seamless skin format · Version 2.2.0
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Background
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Background (Image) | Image asset used as the background. Add only an image or a video, not both. | ||
| Background (Video) | Streaming video asset used as the background. Add only an image or a video, not both. | ||
| Scaling Mode | Sets the scaling behaviour of the background asset. Cover leaves no empty space but can result in cropping. Contain prevents cropping but can leave empty space. | cover | choices: cover, contain, none | |
| Max Video Stream Weight | Sets the maximum allowed video stream weight used when selecting available encodes. | 2.5mb | choices: 3.5mb, 3.0mb, 2.5mb, 2.0mb, 1.5mb, 1.0mb |
Left Overlays
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. | ||
| Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | ||
| Top Overlay Height | Sets the height of the top overlay relative to the overlay container. | 15% | |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | ||
| Bottom Overlay Height | Sets the height of the bottom overlay relative to the overlay container. | 10% |
Right Overlays
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. | ||
| Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | ||
| Top Overlay Height | Sets the height of the top overlay relative to the overlay container. | 15% | |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | ||
| Bottom Overlay Height | Sets the height of the bottom overlay relative to the overlay container. | 10% |
Overlay Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Overlay Container Width | The overlay container defines the area in which the overlays are contained, this sets the width of that container as a percentage of the side panel width. | 80% | Required |
| Overlay Container Height | The overlay container defines the area in which the overlays are contained, this sets the height of that container as a percentage of the total skin height. | 90% | Required |
| Overlay Container Gap | The gap allows you to set a minimum space between overlays. | 1vh | |
| Overlay Container Minimum Width | Sets a minimum width for the overlay container, preventing the overlays from becoming too small on narrow screens. | 120px | |
| Overlay Container Maximum Width | Sets a maximum width for the overlay container, preventing the overlays from becoming too large on big screens. | 300px | |
| Hide Overlays Below Minimum Width | When enabled, if the overlay container width is reduced to below the minimum width, the overlays will be hidden. | False | choices: False, True | |
| Hover Effect | Sets the hover effect when the user hovers over the skin side panel. | scale | choices: disabled, glow, scale, glow & scale | |
| Overlay Container Horizontal Alignment | Sets the horizontal alignment of the overlay container, and all the overlays within it. | center | choices: center, inside, outside | |
| Overlay Container Horizontal Offset (optional) | Sets a horizontal offset for the overlays away from the aligned edge. | ||
| Overlay Container Vertical Alignment | Sets the vertical alignment of the overlay container, and all the overlays within it. | center | choices: top, center, bottom | |
| Overlay Container Vertical Offset (optional) | Sets a vertical offset for the overlays away from the aligned edge. | ||
| Top Overlay - Time In (optional) | Video time (seconds) at which the top overlay appears. Only works with background video. | ||
| Top Overlay - Time Out (optional) | Video time (seconds) at which the top overlay hides. Only works with background video. | ||
| Main Overlay - Time In (optional) | Video time (seconds) at which the main overlay appears. Only works with background video. | ||
| Main Overlay - Time Out (optional) | Video time (seconds) at which the main overlay hides. Only works with background video. | ||
| Bottom Overlay - Time In (optional) | Video time (seconds) at which the bottom overlay appears. Only works with background video. | ||
| Bottom Overlay - Time Out (optional) | Video time (seconds) at which the bottom overlay hides. Only works with background video. |
Sticky Video Player
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Video Side | Sets which side panels display the sticky video player, or disables it. | left | choices: left, right, both, disabled | |
| Video Transition | Sets the transition animation used when the sticky video player appears. | Slide In | choices: Disabled, Slide In | |
| Position | Sets the vertical position of the sticky video player within the side panel. | top | choices: top, middle, bottom | |
| Max Height | Sets the maximum height of the sticky video player. | Match Top Banner Height | choices: Match Top Banner Height, 200px, 250px, 300px, 350px, 400px | |
| Vertical Offset | Sets an additional vertical offset in pixels from the chosen position. | 0 |
Seamless Image & Video Skin
A simple image/video skin template for the seamless skin canvas · Version 1.2.0
Warning: Seamless Image & Video Skin is archived and no longer actively maintained. Recommended alternative: Seamless Image & Streaming Video Skin.
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| 1.0 Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | ||
| 1.1 Background Asset | Upload the 1.1 background asset asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| 1.1.1 Background scaling mode | Select the 1.1.1 background scaling mode option from the list to control how the template behaves. | cover | choices: cover, contain, none | |
| 2.0.1 Left panel overlay | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | ||
| 2.0.2 Right panel overlay | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | ||
| 2.1.0 Side Overlay Hover Effect | Select the 2.1.0 side overlay hover effect option from the list to control how the template behaves. | scale | choices: disabled, glow, scale, glow & scale | |
| 2.1.1 Side Overlay Width | Define the 2.1.1 side overlay width using responsive CSS units (px, %, vw, vh) so it scales across screens. | 80% | |
| 2.1.2 Side Overlay Height | Define the 2.1.2 side overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 100% | |
| 2.1.3 Side Overlay Minimum Width | Define the 2.1.3 side overlay minimum width using responsive CSS units (px, %, vw, vh) so it scales across screens. | 120px | |
| 2.1.4 Side Overlay Maximum Width | Define the 2.1.4 side overlay maximum width using responsive CSS units (px, %, vw, vh) so it scales across screens. | 300px | |
| 2.1.5 Hide Overlays Below Minimum Width | Define the 2.1.5 hide overlays below minimum width using responsive CSS units (px, %, vw, vh) so it scales across screens. | False | choices: False, True | |
| 2.2 Side Overlay X Position | Controls how the 2.2 side overlay x position aligns inside the frame. Pick the focal point that keeps the subject in view. | center | choices: center, inside, outside | |
| 2.2.1 Horizonal Offset (optional) | Sets the 2.2.1 horizonal offset (optional) value used in the creative. Supports plain text or CSS units where required. | ||
| 2.3 Side Overlay Y Position | Controls how the 2.3 side overlay y position aligns inside the frame. Pick the focal point that keeps the subject in view. | center | choices: top, center, bottom | |
| 2.3.1 Vertical Offset (optional) | Sets the 2.3.1 vertical offset (optional) value used in the creative. Supports plain text or CSS units where required. | ||
| 3.1 Sticky Video Side | Select the 3.1 sticky video side option from the list to control how the template behaves. | left | choices: left, right, both | |
| 3.2 Sticky Video Position | Controls how the 3.2 sticky video position aligns inside the frame. Pick the focal point that keeps the subject in view. | top | choices: top, middle, bottom | |
| 3.3 Sticky Video Vertical Offset | Sets the 3.3 sticky video vertical offset value used in the creative. Supports plain text or CSS units where required. | 0 |