The templates are made as primary as potential so you have got a easy start line to start constructing your artistic.

The template consists of the next belongings:

  • index.html
  • code.js
  • fashion.css

The top of the html accommodates the advert measurement and links to the core library and different two template belongings.

The body incorporates a background div and an ordinary html video participant with an ID. You’ll be able to add your personal sources and change the controls and so forth.


The code is wrapped inside the init() perform. This perform known as when our library is ready.

The highlighted strains show we look for a component with ID videoPlayer (the ID of the video factor) and the subsequent highlighted line we inform the library to register this component as the video player. This manner we will measure the VAST video events and report on them.

Subsequent a bunch of basic features. Their objective is defined within the comments of the file however we’ll go by them one after the other.

The prefixedEvent perform provides browser prefixes. (component, sort, callback). Additional down the code yow will discover a sample  prefixedEvent(background, “AnimationEnd”, contractHandler);

The stopPropagation perform prevents additional propagation of the current event within the capturing and bubbling phases for a number of browsers.

The addClass permits you to add a category. addClass(elm, clsName);

The hideElement perform can disguise an element. It calls the addClass perform with the ‘hide’ class Additional down the code you’ll be able to see some examples:


Provides the category ‘hide’ to each the closeButton and the videoContainer parts.

The other of the addClass perform. The removeClass perform can remove a category. removeClass(elm, clsName);

The showElement perform can unhide a component. It calls the removeClass perform with the ‘hide’ class. Additional down the code you’ll be able to see some examples:


Removes the category ‘hide’ to both the closeButton and the videoContainer parts. Making them seen once more.

Subsequent a vid.onended perform. It’s at present empty but if you want to make one thing occur when the video ends playback you’ll be able to put it right here.

Subsequent the closeButton handler. It manages what occurs when the shut button is clicked. You possibly can see that additionally calls the contractHandler on AnimationEnd of the background factor. This is the subsequent perform.

Then the contractHandler perform. The highlighted line is obligatory and is there to tell our system we need to contract the iframe by which the ad is rendered.

Subsequent the expandButton perform. It handles what happens when the expandButton factor is clicked. The highlighted line is obligatory and is there to inform our system we need to increase the iframe through which the ad is rendered.

Then the expandHandler perform which triggers an event and exhibits the close button and video container.

The code.js file can also be the spot where the press is carried out. You possibly can change the URL in this file. Or designate it to a special factor or add multiple clickable parts.

The press is syntax is like so:‘Click on Identify‘, ‘your CLICK URL‘);

Click Identify is used within the reviews to differentiate which click on by way of button was clicked on. You don’t need to enter the URL should you don’t comprehend it yet. We will deal with it for you in the event you send the URL or redirect afterward.

Through the design part we will give you a preview URL so you possibly can see the work in motion and make modifications to your design accordingly. Send us the source information and fonts to [email protected] (WeTransfer most popular)

Remaining artistic or requests for a preview could be send to [email protected]

Additionally learn the GENERAL DOCUMENTATION fur further reference on constructing HTML5 advertisements.

Related posts
accessibilityBlogbrowserChromeedgeFirefoxInternet ExplorersafariusabilityUXWeb

Group Labels Do Not Guarantee… Uniquity?

AdoreboardanalyticsBlogcustomer centricitycustomer experienceCXdata scienceemotion analysismarginal gains

Are Marginal Gains the Answer to Measuring Customer Experience? – Adoreboard Blog


Old Forge’s new passion: mountain biking


David Gibson On APA Appointments; Role of Statewide Interests –