Transparent HTML5 Container For Homepage Takeovers And Site Skins
This article discusses how to create a transparent ad unit with a floating video for use in page takeovers and site skins. This tutorial is best used when the media agency is using the DoubleClick ad server (DCM).
Many of the larger marquee units like the Fandango's 970x150 or the Movietickets.com's 970x250 are deployed with a mixed delivery of a large JPG skin, and an associated HTML video unit. However, it can be challenging you'll find to match the color or position of your Addroid unit with the JPG skin to get that seamless feel.
Typically, the video on a marquee such as this will only occupy 25% of the overall dimension of the unit. In these cases, we recommend using our Transparent HTML Template as opposed to embedding static artwork in the Addroid unit itself.
The video below gives you a quick visual on what's happening.
To build one of these units follow these steps:
- Reach out to email@example.com and request the HTML template.
- Build an Addroid unit that is just the size of the actual video portion of your design (the yellow box in the video).
- Obtain the Addroid video element ID, instructions can be found here.
- Adjust the template - the code in our template is heavily commented and easy to modify to work with your creative. Simply make the few adjustments required.
- Once you've got everything working locally, zip the "index.html" file with a corresponding JPG of the full ad size (backup static), for example, if your index.html is 970x250, but your video element is only 700x200, the JPG should be 970x250.
- Send the zip to your media agency. The larger JPG skin will be hosted by the publisher while the HTML (zip) will be hosted by your media agency. No Addroid tags need to be delivered to the media agency as the HTML will be making calls remotely.
Reach out to firstname.lastname@example.org anytime if you have any questions.