This is very easy to use Floating with Video Template.
A user opens the webpage and sees the predefined area of the webpage flipping over and revealing 800x700 ad content displaying video. Once the video is over, the ad flips back and the website returns to its initial state. Alternatively, the user can close the ad anytime on “Close” button click. The ad accommodates a link to the predefined landing page. The ad maintains this size until the “Close” button click and can be called back only on page reload.
The following items are to be delivered by a creative agency:
NOTE: manifest.json file and HTML file should be in the root directory of the .zip file.
The file “index.html” can be adjusted to customize the banner components.
NOTE: In order to use Adform components for HTML, it is necessary to define global preloadQueue array, where you push all the wanted components to preload before script execution and to load Adform.DHTML.js
Open index.html file and define breakPoints array ( for TuttoSport) then setup banner Width array (TuttoSport Home and Calcio [642, 728]) and bannerHeight array (Tuttosport Home [388, 435], TuttoSport Calcio [361, 410]). You can then edit animation speed changing transitionTime value (it's intented in seconds) or animation appearance editing perspective distance (a smaller value makes the card wider while turning).
The card can change its position sticking itself to page elements. You just have to set a Custom Variable named "divClass" or "divId" assigning to it the element class name or id name. Please notice that loading asynchronous elements (like a wallpaper or an expanding element) can make self positioning fail.
INFO: Please refer to the Video Player component for more detailed information on component setup and behavior.
|Component/feature||Technical Documentation||Template in STUDIO|
|Auto Close||Contact RM Support|
|Panel Slide (Filmstrip) Component||Documentation||Template|
|Open Door Component||Contact RM Support||Template|
|HTML Animations||Any HTML content animation|
In order to deliver HTML5 banners fully compliant with the specs, follow the instructions on Producing Standard HTML5 banners in Adform Test and Support Center: http://test.adform.com/testpage/banner-specifications/html5-banner/standard-html-ad/
|Desktop browser version|
|Internet Explorer 8 (and bellow)||not supported (backup image)|
|Internet Explorer 9||fully supported|
|Internet Explorer 10 & 11||fully supported|
|Firefox (newest version)||fully supported|
|Chrome (newest version)||fully supported|
|Safari (newest version)||fully supported|