Video parallax (web)
Overview
Formerly named "Smart Video-Parallax for Mobile" / "RTB+ Smart Video-Parallax for Mobile". The "Video parallax" creative template displays a piece of a background video ad while the user is scrolling. Video playback starts as soon as a specified percentage of the ad's surface is visible.
Most common sizes
Most common RTB sizes of this ad format: 300x250, 300x600, 305x100, 300x100, 728x90, 640x960, 980x250, 630x250, 970x250.
Demo
Compliancy
| Criterion | Compliancy |
|---|---|
| Creative rotation | ✅ |
| Friendly iFrame | ✅ |
| Responsive web design | ✅ |
| RTB | ✅ |
| VAST 4.2 and lower | ✅ |
| VAST wrapper | ✅ |
| VPAID | ✅ |
Creatives
This section applies for the direct creative template only.
Supported video files:
- mp4, webm (use files with high resolution and bitrate)
- any VAST redirect containing the formats: mp4, ogg, webm, javascript (for VPAID only)
Note 1: In case of VAST redirects, the ad format picks the most appropriate file to play according to the following priorities: (1) mp4, (2) webm, (3) ogg, (4) javascript.
Note 2: In case of VAST redirects, use the "Paste script" creation method and paste the URL or the entire XML into the "Creative script" field.
Creative template parameters
| Name | Description | Default value |
|---|---|---|
| Main options | ||
| Max ad's container width (px/%) | Specifies the max. width of the ad's container; make sure you add the unit - e.g. 750px, 100%; Note: the percentage value refers to the max. width of the parent container | 100% |
| Tracking url | Make sure you add [timestamp] to the URL for cache busting |
|
| Trigger start/pause | Part of the player (in %) which has to be visible to start/pause the video ad | 50 |
| Text label options | ||
| Label background color | Specifies the background color of the label | #000000 |
| Label text | Specifies the label displayed above the ad | Advertisement |
| Label text font color | Specifies the color of the label's text | #ffffff |
| Label text font size | Specifies the size of the label's font | 12 |
| Border bottom options | ||
| Border bottom color | Specifies the border's color | #000000 |
| Border bottom height | Specifies the border's height which will be under the ad; 0 means that the border will not appear | 2 |
| Position | ||
| Identifier's names | Specifies identifier or more identifiers of elements. Separate them by semicolon if needed. Equativ will put an ad inside it | |
| Paragraph type | Specifies type of paragraph (p, div, ...) inside specified article. Value of this field won't be taken into account if ad placement or automatic is selected | p |
| Position in paragraph | Specifies position of an ad in paragraph. If you choose automatic, algorithm will pick the best place for showing an ad. Top/bottom means ad will be placed in the top/bottom of specified article. To have an ad placed in specified position - choose specified paragraph. | automatic |
| Selected position |
Select position of the ad
|
ad placement |
| Specified paragraph's number | Places an ad after the specified paragraph, e.g. paragraph no. 3. If there is not enough paragraphs on a page - the ad will be placed after the last one. This field will be used only if you chosen the specified paragraph in the Position in paragraph option. | 1 |
| Buttons | ||
| Button's color | Specifies the button's color. | #cccccc |
| Button's size |
|
normal |
| Volume button | Specifies if the volume button should appear | true |
| Video background | ||
| Add video background | Add a video background to the creative; the video background height is set to 100% | false |
| Video background filters | ||
| Blur video filter | Sets the blur for the video in the background in px (0-100) | 7 |
| Color inversion video filter | Sets the color inversion for the video in the background in % (0-100) | 0 |
| Grayscale video filter | Sets the grayscale for the video in the background in % (0-100); e.g. set 100 to get a black and white video | 0 |
| Sepia video filter | Sets the sepia effect for the video in the background in % (0-100) | 0 |
| RTB options (only for the RTB template) | ||
| Maximum bitrate | Maximum expected bitrate for the video creative, in Kbps | |
| Maximum duration | Maximum ad duration, in second(s) | |
| Minimum bitrate | Minimum expected bitrate for the video creative, in Kbps | |
| Minimum duration | Minimum ad duration, in second(s) | |
| Video player height | Specifies the video player height (in px); if it's not defined, the height is calculated automatically using the aspect ratio (16:9) | |
| Video player width | Specifies the video player width (in px) | |
Features
The Video parallax shows a piece of background and plays a video ad in it. When the user scrolls down the page, it waits until a specified percentage of the ad's surface is visible (50% by default) and then starts playing the video. It does not disappear at the end and can be played again.
The Video parallax works best with vertical videos. When using standard videos (16:9), you can add video background options to enhance the parallax effect. For the background, you can apply sophisticated features based on CSS3 filters, such as blur, grayscale, invert and sepia (read more about CSS3 filters here).
Event listening
The Smart Video-Floorad supports the following events: adBegin, adDuration, adEnd and adError. You can listen to these events to control the functioning of your site. Any event contains the parameter formatId to get which formatId (on the page) fired the event:
window.addEventListener('adBegin', function (e) {
console.log(e.formatId);
});adBegin / adEnd
For instance, if your website has a video player playing video content, you can mute that player when the ad appears and unmute when it disappears:
window.addEventListener('adBegin', function (e) {
document.querySelector('video').muted = true;
});adDuration
The adDuration provides access to the videoDuration property, which can be useful to retrieve the duration of the whole video ad:
window.addEventListener('adDuration', function (e) {
console.log(e.videoDuration);
});adError
To take an action when there is an error or the VAST is empty:
window.addEventListener('adError', function (e) {
console.log("Ad error occured");
});Force VPAID media files
To update media files selection and prioritize VPAID creatives the sasVpaidFirst variable can be used with a value of true. The below snippet can be added as a custom script:
<script> sasVpaidFirst = true; </script>
Metrics
The player and data logging start when the player is visible more than 50%. Also see the Report metric reference article.
Limitations
- works for mobile web only (no display web supported!)
- supported OS and browsers: iOS Safari (v 10.0 or higher); Android Chrome (v 4.4 or higher)
- in some rare cases in Android Chrome browsers player appears after clicking on page, not after scroll.
Release notes
- 2025-04-01 - Updated icons
- 2025-01-20 - Update for click counting URL for RTB template
- 2024-09-25 - Add support for OMSDK
- 2023-10-16 - Updated Video Placement Type parameter
- 2023-07-18 - Added new RTB macros
- 2023-04-05 - Update sas-libs version to 1.1 and remove document.write from the EMP script
- 2023-03-27 - Select the most appropriate creative encoded version based on bandwidth and resolution
- 2021-06-27 - Fix aspect ratio calculation
- 2021-01-14 - Improve sound button rendering
- 2021-01-04 - Fix for duplicated volume button
- 2020-05-13 - Removed start muted parameter
- 2020-04-20 - Removed RTB parameters from click count pixel
- 2019-07-11 - Fixed replay functionality for Chrome browser
- 2019-05-30 - Added support for video placement types (OpenRTB 2.5) in RTB template
- 2019-02-05 - Viewability module improvements - Measures are now more accurate and more integrations are covered
- 2019-01-28 - Add RTB dimensions in click url
- 2018-12-12 - Fix the position of the play button
- 2018-06-11 - Fix for player rendering in Android Chrome browsers
- 2018-06-08 - Not sending start and pause events when ad is not supposed to start playing
- 2018-05-14 - Viewability counting
- 2018-04-25 - Parse RTB parameters into strings
- 2018-04-23 - Code refactoring + VAST4 support
- 2018-01-22 - Updated meta parameters
- 2017-12-04 - Updated meta parameters in RTB template
- 2017-11-13 - Updated meta parameters in RTB template
- 2017-11-13 - Fix for custom script rendering
- 2017-09-28 - Updated meta parameters in RTB template; Update for tracking URL parameters
- 2017-09-20 - Fix for the volume button
- 2017-07-10 - Count impression from XML
- 2017-07-06 - Count impression when video started
- 2017-05-05 - New parameter "Trigger start/pause" for triggering player visibility
- 2017-03-24 - Handling VPAID creatives
- 2016-10-25 - Releasing RTB version of template