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.
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;
<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>
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.
In order to trigger the banner display, you need to do four things:
More information on setting up external ads can be found here.
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.
The onExternalAd() function does four things:
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:
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.