Creating Banners that Fly Out over the Page using JavaScript

Note: The steps outlined in this topic are for Flash based players and will not work in HTML5 players and may prevent HTML5 players from functioning.

Some customers want to run banner ads on their pages without taking up additional real estate. In some cases they may want to visually separate banners that are associated with video advertising from banners that are associated with page content, so that "run of site" ads campaigns can be independant of "video ad" campaigns.

This article shows you one way to do this, using our "External Ad" functionality, and some JavaScript. 

You can download a zip file that contains the full source code to a working player here. And you can see it running live in production here.

Customizing the example

You can modify it to work with your player by replacing these three JavaScript variables in the page the player is in:

var gPlayerID=<yourPlayerID>;
var gPublisherID=<yourPublisherID>;
var gVideoID=<yourVideoID>;

You can also change the position and speed of the player by altering these global variables in the FlyOutPlayer.js:

// how long will it take the banner to fly out of the video player?
var gFlyDurationMilliSec = 5000; 
// What is the starting position of the left edge of the banner?
// (= the left edge of the player)
var gStartLeft = 400; 
// How wide is the ad banner?
var gAdWidth = 300; 

In this example, I am trafficking to my player a synchedBanner ad format that contains a video ad and two banners, but you could adapt these techniques to use VAST companions or make up your own ad format. Anything our player does not recognize will be passed to the JavaScript function that is listening for the external ad event if external ads are enabled.

A hidden panel in the HTML

First, you need a hidden panel in the HTML of the page that your JavaScript can manipulate. In the example, the hidden panel for the 300x250 banner looks like this:

<div class="flyOverAd" id="flyOver" style="display: none; border: 0px; margin:0px; padding: 0px;" >
    <span style="color: White; width: 270px; float: left; font-size: small;">
        Your video will begin right after this message:</span>
    <span style="padding:5px; cursor: pointer; display: block; float: right;">
        <img class="closeButton" style="float: right; border: 0px; margin:0px; padding: 0px;"
             title="close" alt="close" src="images/close.jpg"></span>
    <div style="padding-top: 0px;  backgroundColor: blue; clear: both; width: 300px;">
         <a href="" id="flyOverLink" target="_blank">
            <img id="flyOverImg" style="padding-top: 5px; clear: both; width: 300px; height:250; "/>
            <span></span></a>
    </div>
</div>

Note that there is an anchor <a> tag for the click-through, and an <img> tag to hold the banner image, both inside another <div> that contains a message announcing the advertisement. The outermost all three, the <div>, <a> and <img>, have id and/or class attributes that the JavaScript and CSS will use to locate the tags that need to be manipulated.

If you do not want to have a lot of extra JavaScript and HTML for the banner in your page itself, you can wrap it all in a single parent script that includes all the other JavaScript files and adds the necessary <div> tag to the page. This is what the FlyOutPlayerWrapper.js does. JavaScript can use document.write()  to add the needed tags, provided that slashes and quotation marks are escaped with a preceding backslash.

Thus, you can express this:

  <div class="flyOverAd" id="flyOver" style="display: none; border: 0px; margin:0px; padding: 0px;" ></div>

using document.write() like this:

    document.write("<div class=\"flyOverAd\" id=\"flyOver\" 
      style=\"display: none; border: 0px; margin:0px; padding: 0px;\" ><\/div>");

Or you can build up a string and use document.write() to write the string out when you are done, as this example does.

Triggering the banner display

In order to trigger the banner display, you need to do four things:

1. Enable APIs for all players where the fly-out ad is to play, using the Video Cloud Studio Publishing module.
2. Include the APIModules_all.js file.
3. Enable external ads in the page or the custom player.
4. Listen to the  "externalAd" event with a function.

More information on setting up external ads can be found here.

The onExternalAd() function

In order to get the URLs for the ad banners to display in the page, the JavaScript must parse the event passed to the onExternalAd() function to find the necessary information. There are four functions that do this in the example:

• getXMLDoc()
• getVideoAd()
• collapsedBannerAd()
• expandedBannerAd()

Once you have the URLs of the images and click-through sites, you need to have a banner fly out over the page.  The JavaScript needs to locate the div where the banner will go and change the style and position so that it is visible. This is done by the onExternalAd() function in this example.

This example uses the jQuery library to facilitate the editing of the page and the animation of the banner div. More information on jQuery can be found here.

jQuery uses the $(selector) notation to find elements in the page for editing. The selector can be either a CSS selector or a JavaScript variable. This example uses the JavaScript variable "domAdXML" to get the XML for jQuery to parse. Then it stores this jQuery object in a JavaScript variable named "$domAdXML". It is a common convention to begin jQuery variable names with a "$", but it does not change the code.

The onExternalAd() function does four things:

1. Parses the Ad XML from the event object using standard JavaScript mechanisms.
2. Assigns the AdXML to a jQuery object and uses jQuery to extract the needed URLs using 3 functions: getVideoAd(), collapsedBannerAd(), and expandedBannerAd().
3. Inserts the Ad URLs into the banners and displays them.
4. Tells the player to show the video ad using the adModule.showAd(videoAd) method.

Once the video ad has started, jQuery continues to animate the banner's left position for as long as was specified in the gFlyDurationMilliSec global variable.

When the video ad completes, the player will send the "adComplete" event, which this example listens to with the line:

    adModule.addEventListener(BCAdvertisingEvent.AD_COMPLETE, onAdComplete);

The onAdComplete function uses the animate method again to close the fly-out banner, but it leaves the 468x60 banner below the video player. This function is also called when the user clicks the "close" button, but it does not end the video ad if the video ad has not already completed on its own.

This example presents one possible configuration of these techniques, but it is hopefully suggestive of the sorts of ad display units that you can run alongside your own video players.