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

The template consists of the following belongings:

  • index.html
  • code.js
  • type.css

The html is fairly primary. It links the .css and .js information. And it incorporates a video participant and increase and shut buttons. And it consists of the core library:

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


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

The highlighted strains show we look for an element with ID videoPlayer (the ID of the video aspect) and the subsequent highlighted line we tell the library to register this aspect because the video player. This manner we will measure the VAST video occasions and report on them.

Subsequent a perform that controls what happens when the playButton is clicked.

Then the closeButton perform. This perform controls what occurs when the closeButton is clicked. The highlighted line is obligatory and is there to tell our system we have to contract the iframe through which the advert is rendered.

Inside this perform a variable referred to as elm is said. elm is an array. Every factor that is added in this array goes to be hidden when the closeButton is clicked. Be happy so as to add your personal parts to this array.

Subsequent the expandButton perform which handles what ought to happen when the ad expands (show/cover parts, begin video, name ADTECH.broaden). The highlighted line is obligatory and is there to inform our system we need to broaden the iframe by which the ad is rendered.

Within this perform a variable referred to as expC is said. expC is an array. Every aspect that is added in this array is going to be shown when the expandButton is clicked (assuming it has class=”disguise” beforehand) . Be happy so as to add your personal parts to this array.

Beneath that the vid.onended perform. This perform controls what should happen when the video finishes enjoying.

The code.js file can also be the spot the place the press is carried out. You’ll be able to change the URL in this file. Or designate it to a special aspect or add a number of clickable parts.

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

Click Identify is used in the studies to differentiate which click on via button was clicked on. You don’t should enter the URL in the event you don’t comprehend it but. We will handle it for you should you ship the URL or redirect afterward.

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

Last artistic or requests for a preview may be ship to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 advertisements.