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:
this is a “wrapper file” it creates another iframe of 300×250 size to open video.html file
this is the html/js code that handles mp4 video. It contains the
clicktagthat must be replaced to track the clicks
this is an image that it’s showed if the browser can’t show the mp4 file
this is the video ad
To create your custom video ad, prepare the 300×250 pixel video file
300x250.mp4. Prepare the 300×250
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
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
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:
this is a wrapper file,
this is the file that shows the video
mobile vertical version
desktop vertical version
placeholder image for mobile if video failes
placeholder image for desktop if video failes
Open AdAdmin software. Create a banner and make it
PAUSED. Edit the banner and copy the
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.
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.