This is a highly customizable and very easy to use animated Video Skin template for Desktop non responsive sites.
The format has been tested on these websites:
http://www.centrum.cz/
http://www.ihned.cz/
http://www.aktualne.cz/
A user opens the webpage and sees a video skin background. On tab click, the initial area of the top banner expands to cover the page content. The banner offers additional rich media experience.The user can choose to play from up to 3 videos. The banner accommodates a link to the predefined landing page. The ad maintains this size until the user clicks the Close button.
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
These are the values that can be changed:
-type - Type of skin you want to use (available values: videoSkin, fadingSkin, dynamicSkin);
-height - Height of Dynamic Skin: auto attempts to fit according to video dimensions, 100% covers the whole available browser area, any number sets fixed height in pixels;
-initialMargin - Top margin set to page content, if tabs are set in HTML auto will determine the optimal value according to tabs size;
-autoClose - Closes Dynamic Skin at video complete event;
-maxWidth - Max width set to page content if default width is 100% (use number for pixel and percent for percent);
-elemToAnimate- Selector of element to animate (#id, .className, tagName);
-transitionTime - Duration of animation in seconds;
-transitionEasing - Animation easing;
-tabs - Read below for more info
INFO: Please refer to the Video Skin Documentation for more detailed information on component setup and behavior.
Audio
Video
Component/feature | Technical Documentation | Template in STUDIO |
---|---|---|
Video Component | Documentation | Template |
HTML Animations | Any HTML content animation |
In order to deliver HTML5 banners fully compliant with the specs, follow the instructions on Producing HTML5 banners in Adform Test and Support Center: http://creative.adform.com/support
The format requires an additional script to be loaded before the tag. In order to do that, navigate to the Tags section in the Adform system. Select the needed tag and click the “JavaScript URLS” button. Paste in the following custom script URL and tick the “Load before banner” check-box.
Custom Script URL:
//s1.adform.net/banners/scripts/extensions/video_skin_marquee_v2.js?bn=%%ADFTAGID%%;zmin=0;zmax=10000;marginTop=150;width=1180;
Desktop browser version | |
---|---|
Internet Explorer 9 (and bellow) | limited animation |
Internet Explorer 10 & 11 | fully supported |
Edge | fully supported |
Firefox (newest version) | fully supported |
Chrome (newest version) | fully supported |
Safari (newest version) | fully supported |