Video in Banner

It’s possible to dynamize a video in your ad without it being distorted, and while keeping its full visibility.

Once the banner is activated by our AdServer, the video will change according to the set parameters (geolocation, weather, date / time, cookies, retargeting …).

First step

Install the JS and CSS of the DCO Enabler ADventori. More details here

Second Step

Declare all your HTML elements:

<div id="myAd">
    <div id="myBrand"><img src="img/300x44_YourBrand-Header.jpg"></div>
    <div id="myVideo"></div>
</div>
  • #myAd : div which will contain our Ad .
  • #myBrand : div which will contain our Brand .
  • #myVideo : div which will contain the Video.

Third Step

Initialize your data:

ADventori.initData({
    url  :"http://adventori.com",
    mp4  :"http://adventori.com/lp/enabler/templates/Wall_Crea/Crea_Video/Video_Outstream/300x250/video/Big.mp4",
    webm :"http://adventori.com/lp/enabler/templates/Wall_Crea/Crea_Video/Video_Outstream/300x250/video/Big.webm"
});

Fourth Step

Now you have to declare and initialize your Video in Banner:

var video = new ADventori.Video({
    videoContainer : document.getElementById('myVideo'),
    clicUrl : ADventori.data.url,
    urlMp4  : ADventori.data.mp4,
    urlWebM : ADventori.data.webm,
    cssStyle : "border:solid 1px black;color:black;",
    autoplay : true,
    showControls : false,
    sound : false,
    lightControls : true,
    controlsStyle :"bottom: 15px;color:white;"
});

Below are the Video in Banner properties:

  • videoContainer : html container to host the video
  • clicUrl : clickTag of video (optional)
  • urlMp4 : url of mp4 video
  • urlWebM : url of webM video
  • cssStyle : Css properties of video player. Example: “color:red;border:solid 1px; etc.” (optional)
  • showControls : true/false (optional)
  • autoPlay : true/false (optional)
  • sound : true/false (optional)
  • lightControls : true/false (optional) view custom controls
  • controlsStyle : Properties css of the light controls. example: “color: red; border: solid 1px; …” (optional)

Example