AdAdmin video banner examples

In this article you can find two HTML5 video banner templates that can be used in your AdAdmin installation.

These are HTML5 banners so they must be prepared as zip file and uploaded as HTML5 banner type.

Here there are two templates:

VIDEO BANNER 300×250 PIXELS – VIDEO MPU – FIXED SIZE

Video banner ad 300×250 pixels, it’s an MPU banner with fixed size, it should be autoplaying both on desktops and mobiles.

You can download it here: video-300×250.zip.

In this file you will find:

• index.html
  this is a “wrapper file” it creates another iframe of 300×250 size to open video.html file
• video.html
  this is the html/js code that handles mp4 video. It contains the clicktag that must be replaced to track the clicks
• poster300.jpg
  this is an image that it’s showed if the browser can’t show the mp4 file
• 300x250.mp4
  this is the video ad

To create your custom video ad, prepare the 300×250 pixel video file 300x250.mp4. Prepare the 300×250 poster300.jpg file.

When you have your media files, create the banner in the AdAdmin software, set the status as PAUSED and save it. It’s paused because it’s not ready yet. Open the banner again and copy the clicktag.

Unzip the template zip file linked above in a temporary folder on your computer, edit the video.html file (you need a text editor, notepad.exe or another one, they are all ok). This is the change you have to make: paste the AdAdmin ClickTag in the code:

Save the html file.

Overwrite the video mp4 file and the poster jpg in the folder with your adv files.

Now you have your folder ready. Place all this file in a zip, the zip file must contain only the files, you can’t insert folder or subfolders.

Now that you have prepared the zip file you can open again the banner pick the file and upload it. If you re-open it, you can see that the system has created the folder with the files from your banner:

Remember to change the status from PAUSED to SERVING to see your video banner in action!

RESPONSIVE VIDEO BANNER 300×500 AND 600×500

This template is similar to the previous one but handles two video files and two poster images. If the screen size is lower than 600px wide it will show the 300×500 video. If the size is above 600 pixel it will show the 600×500 video.

Download template here: video-resp-300-600×500.zip

To customize it unzip the file in a folder:

• index.html
  this is a wrapper file,
• video.html
  this is the file that shows the video
• 300x500.mp4
  mobile vertical version
• 600x500.mp4
  desktop vertical version
• poster300.jpg
  placeholder image for mobile if video failes
• poster600.jpg
  placeholder image for desktop if video failes
  

Open AdAdmin software. Create a banner and make it PAUSED. Edit the banner and copy the ClickTag url.

Open the video.html file and paste the ClickTag url (view image in the previous example).

Overwrite the video files and the images file with your files.

Create the zip and upload it in the banner as HTML5 ad type.

NOTES

Remember that video banners could be heavy. If your videos are big this could cause problems for server bandwidth especially if you have a lot of traffic.

Probably you need to change the maxKB value in the /amb/src/componenti/7banner/index.php file, which by default allows to upload files large max 1MB. If you have version lower than 3.98i you have to open the code and fix this line:

If you have version grater or equal to 3.98i, you can modify the size in KB in Settings section, find the MAXSIZE_UPLOAD_BANNER setting and modify it.

This responsive video banner can be used also in vignette positions. But, vignette positions on AdAdmin are partially implemented and work only if the site the hosts the position script has jQuery library loaded.