AdAdmin video banner examples

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

January 29, 2022

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.

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Recommended

AdAdmin add footer sticky banner

To add a footer sticky banner with AdAdmin software follow these steps: Create a new AdAdmin position Create a new…

April 16, 2022

AdAdmin vignette banner configuration

Create a Position for the vignette ads: Flag the “Vignette mode” in the position configuration (the script above changes, so…

April 12, 2022

AdAdmin ad scripts with document.write

Script banners that uses document.write javascript function doesn’t work anymore with AdAdmin positions since version v.3.85 (03/11/2020). This happens because…

March 9, 2022

Use the same position multiple times to display ads in one page

If you need to reuse the same script position in a single page to display ads, be sure to change…

March 3, 2022

Customize css styles in AdAdmin

To customize the css styles of your AdAdmin installation you have to create a custom theme. To create a custom…

June 17, 2022

AdAdmin 3.99 update, fallback filler option

In the version 3.99 of AdAdmin has been added support for fallback filler. The fallback filler is a banner already…

March 5, 2022