Responsive Leaderboard Setup Documentation
Updated: 18/08/2017. Version: 1.5
Example of Responsive Leaderboard:
Example of Responsive Leaderboard With Video:
Description
The following guidelines describes how to setup Responsive Leaderboard Ad without and with the video player component. Please follow instructions bellow in order to correctly set up the format and change available parameters.
Responsive Leaderboard Initialization
To make banner responsive, implement resize function in <script></script> tag inside your .html document.
<script>
...
dhtml.external.resize('100%'); // makes responsive width
...
</script>NOTE: in order to make your ad responsive in height and width, you nee to add additional value.
<script>
...
dhtml.external.resize('100%', '100%'); // makes responsive width and height
...
</script>To get more details about responsiveness function, please check documentation bellow:
Responsive Leaderboard With Video Initialization
After initial resize function implementation, you should initialize Video Player component in <head></head> tag inside your .html document. To get more details about Video Player component, check documentation below code spinet .
<head>
...
<!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
<!-- Components -->
...
</head>Video Player Container Setup
In order to work more flexible with Video Player components, we strongly suggest to use Video Player Container. You need
1) load it in <head></head> tag inside .html document.
<head>
...
<!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
<!-- Components -->
...
</head>To get more details about Video Player Container, check documentation bellow.
2) Setup Video Player container inside tag:
<script>
...
var player = new Adf.VideoContainer({
container: '#adf-video', // id or class of an element where the video should be rendered
clicktag: clickTAGvalue,
target: landingpagetarget
});
player.init(); // initialize video player
...
</script>How to change Video Player component position
If you want to change video component position inside your template, please follow the instructions bellow:
1) Remove class .u-hCentered class from video container element if you want the video to have a custom position.
2) Add selected styles to video container element like #adf-video { left: 0px;}; or .adf-Video { right: 0px;}
How to remove Video Player and Video Player Container components
If you want to remove video component from your template, please follow the instructions bellow:
1) Remove video assets from Additional File tree.
2) Remove video styling from custom.css.
3) Remove Adform.VideoContainer.js and Adform.VideoContainer.js urls from <head></head> tag inside .html.
<head>
...
<!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
<script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
<!-- Components -->
...
</head>4) Remove Video Player container setup code from <script></script> tag:
<script>
...
var player = new Adf.VideoContainer({
container: '#adf-video', // id or class of an element where the video should be rendered
clicktag: clickTAGvalue,
target: landingpagetarget
});
player.init(); // initialize video player
...
</script>