A template for Seamless skin, that allows for the easy creation of a Sliding skin creative. The format allows for two background assets to be uploaded, with a "sliding" interactive mouse effect that transitions from one asset to the other. Overlays are then added on top, to allow static content to be responsively placed on the sides of the skin.
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
Asset Specs
Backgrounds
Two 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
Top Banner
- Top Overlay:
Maximum size of 1000x180px* (PNG with transparent background)
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:
- 🇦🇹 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
Top banner dimensions can also vary from publisher to publisher. You should always confirm specs with the publishers on your plan before creating skin assets.
Format description and guidance
A template that allows for the easy creation of a "sliding skin" style creative. The format allows two assets (image or video) to be uploaded, with an interactive (mouse hover) sliding mechanic that moves the boundary between the two assets. Overlay images are then added on top, to add static branding and messaging elements to the sides and top of the skin.
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 be added as a separate image/video/HTML/template banner.
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.
Sticky video and the side overlays. When the creative is paired with the Skin Top with Sticky Streaming Video top banner, the video moves into the side panel once the top banner scrolls out of view. The Overlay Behaviour setting controls what the side overlays do while that player is on screen:
- Overlap (default) – the player is drawn on top of the overlays. Nothing moves, but the player can obscure overlay content on shorter screens.
- Resize While Sticky – the overlay container shrinks to the space the player leaves while it is on screen, and returns to full size when playback is handed back to the top banner.
- Always Reserve Space – that reduced overlay area is kept at all times, so nothing moves as the user scrolls.
Both reserving modes scale the overlays down rather than cropping them, so design overlay artwork to stay legible at around two thirds of its full height. The Overlay Container Gap sets the minimum space kept between the player and the overlays. Overlap is the default, so a creative only behaves differently once this is changed.
Max total file weight
3.5 MB.
If you use skin background videos, keep clips to roughly 10-15 seconds where possible to minimise compression and quality issues.
For best performance, all assets should be compressed and optimized to the lowest possible file weight. We recommend using tinypng.com to compress PNG overlays.
Click tags and tracking
The template supports two separate clickURL & trackers - one for the main skin body, and another for the top banner.
Audio
No
Template Details
Seamless Sliding Streaming Video Skin
General
| Parameter | Purpose |
|---|---|
| Click URL | Click destination for the skin. |
Skin 1
| Parameter | Purpose | Default |
|---|---|---|
| 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. | |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever this background does not cover the skin. | #000000 |
| Left Main Overlay | Left main overlay asset for this skin, using as much space as is available within the overlay container. Also shown over Skin 2 unless Skin 2 sets its own. | |
| Left Top Overlay (optional) | Optional left top overlay for this skin, anchored to the top of the overlay container at the Left Top Overlay Height. Also shown over Skin 2 unless Skin 2 sets its own. | |
| Left Bottom Overlay (optional) | Optional left bottom overlay for this skin, anchored to the bottom of the overlay container at the Left Bottom Overlay Height. Also shown over Skin 2 unless Skin 2 sets its own. | |
| Right Main Overlay | Right main overlay asset for this skin, using as much space as is available within the overlay container. Also shown over Skin 2 unless Skin 2 sets its own. | |
| Right Top Overlay (optional) | Optional right top overlay for this skin, anchored to the top of the overlay container at the Right Top Overlay Height. Also shown over Skin 2 unless Skin 2 sets its own. | |
| Right Bottom Overlay (optional) | Optional right bottom overlay for this skin, anchored to the bottom of the overlay container at the Right Bottom Overlay Height. Also shown over Skin 2 unless Skin 2 sets its own. |
Skin 2
| Parameter | Purpose | Default |
|---|---|---|
| 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. | |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever this background does not cover the skin. | #000000 |
| Left Main Overlay (optional) | Optional left main overlay for this skin. Leave empty to show the Skin 1 left main overlay wherever the slide reveals this background. | |
| Left Top Overlay (optional) | Optional left top overlay for this skin, using the Overlay Container Left Top Overlay Height. Leave empty to show the Skin 1 left top overlay over this background too. | |
| Left Bottom Overlay (optional) | Optional left bottom overlay for this skin, using the Overlay Container Left Bottom Overlay Height. Leave empty to show the Skin 1 left bottom overlay over this background too. | |
| Right Main Overlay (optional) | Optional right main overlay for this skin. Leave empty to show the Skin 1 right main overlay wherever the slide reveals this background. | |
| Right Top Overlay (optional) | Optional right top overlay for this skin, using the Overlay Container Right Top Overlay Height. Leave empty to show the Skin 1 right top overlay over this background too. | |
| Right Bottom Overlay (optional) | Optional right bottom overlay for this skin, using the Overlay Container Right Bottom Overlay Height. Leave empty to show the Skin 1 right bottom overlay over this background too. |
Background Settings
| Parameter | Purpose | Default |
|---|---|---|
| Scaling Mode | Sets how the background scales. Cover fills the area and may crop. Contain shows the whole asset and may leave empty space. None keeps the intrinsic size. | cover | choices: cover, contain, none |
| Max Video Stream Weight | Sets the maximum stream weight for the background video. With more than one background video the budget is split between them, and the skin and top banner together must stay within platform limits. | 2.5mb | choices: 3.5mb, 3.0mb, 2.5mb, 2.0mb, 1.5mb, 1.0mb |
Overlay Container
| Parameter | Purpose | Default | Notes |
|---|---|---|---|
| Overlay Container Width | Sets the width of the overlay container as a percentage of the side panel width. | 80% | Required |
| Overlay Container Height | Sets the height of the overlay container as a percentage of the skin height. | 90% | Required |
| Overlay Container Gap | Sets the minimum space kept between the overlays, and between the sticky video player and the overlays. | 1vh | |
| Overlay Container Minimum Width | Sets a minimum width for the overlay container, so the overlays do not become too small on narrow screens. | 120px | |
| Overlay Container Maximum Width | Sets a maximum width for the overlay container, so the overlays do not become too large on wide screens. | 300px | |
| Left Top Overlay Height | Sets the height of the left top overlay on both skins as a percentage of the overlay container (px, vw and vh also accepted). | 15% | |
| Left Bottom Overlay Height | Sets the height of the left bottom overlay on both skins as a percentage of the overlay container (px, vw and vh also accepted). | 10% | |
| Right Top Overlay Height | Sets the height of the right top overlay on both skins as a percentage of the overlay container (px, vw and vh also accepted). | 15% | |
| Right Bottom Overlay Height | Sets the height of the right bottom overlay on both skins as a percentage of the overlay container (px, vw and vh also accepted). | 10% | |
| Hide Overlays Below Minimum Width | When enabled, hides the overlays whenever the overlay container is narrower than its minimum width. | False | choices: False, True | |
| Hover Effect | Sets the effect applied to the overlays when the pointer hovers over the side panel (desktop only). | scale | choices: disabled, glow, scale, glow & scale | |
| Overlay Container Horizontal Alignment | Sets the horizontal alignment of the overlay container and every overlay within it. | center | choices: center, inside, outside | |
| Overlay Container Horizontal Offset (optional) | Sets a horizontal offset for the overlay container away from its aligned edge (px, %, vw). | ||
| Overlay Container Vertical Alignment | Sets the vertical alignment of the overlay container and every overlay within it. | center | choices: top, center, bottom | |
| Overlay Container Vertical Offset (optional) | Sets a vertical offset for the overlay container away from its aligned edge (px, %, vh). |
Advanced Overlay Settings
| Parameter | Purpose | Default |
|---|---|---|
| Main Overlay Layout | Inset fits the main overlay into the space left by the top and bottom overlays, inside the overlay container. Full Bleed fills the whole side panel with the main overlay, ignoring the overlay container's width and height, and draws the top and bottom overlays on top of it. | Inset | choices: Inset, Full Bleed |
| Main Overlay Scaling Mode | Sets how the Full Bleed main overlay fills the side panel. Contain shows the whole asset. Cover fills the panel and may crop. Fit to Width matches the panel width and may run past the top or bottom. Fit to Height matches the panel height and may run past the sides. Ignored in the Inset layout. | contain | choices: contain, cover, fit to width, fit to height |
| Main Overlay Horizontal Alignment | Sets the horizontal alignment of the Full Bleed main overlay within the side panel. Ignored in the Inset layout. | center | choices: center, inside, outside |
| Main Overlay Vertical Alignment | Sets the vertical alignment of the Full Bleed main overlay within the side panel. Ignored in the Inset layout. | center | choices: top, center, bottom |
Sticky Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Video Side | Sets which side panels show the sticky video player when the top banner scrolls out of view, or disables the handoff. | 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 copies the height of the top banner. | Match Top Banner Height | choices: Match Top Banner Height, 200px, 250px, 300px, 350px, 400px |
| Vertical Offset | Sets an additional vertical offset from the chosen position (px, %, vh). | 0 |
| Overlay Behaviour | Controls how the side panel overlays react to the sticky video player. Overlap keeps the original behaviour, where the player is drawn on top of the overlays and can obscure them on some screens. Resize While Sticky shrinks the overlay container to the space left by the player while it is on screen, and restores it when the player hands playback back. Always Reserve Space keeps that reduced overlay area at all times, so nothing moves as the user scrolls. The Overlay Container Gap sets the minimum space kept between the player and the overlays. | Overlap | choices: Overlap, Resize While Sticky, Always Reserve Space |