How to create an in-banner-video creative

Intro

This article describes how you can create your own in-banner-video in HTML5. It's as easy as replacing 4 files (3 images and a video).

Below is a GIF showing what your final HTML banner could look like!

Let's start with downloading the template folder, so you can get to know the structure as you read along this tutorial:

Template for video with sound  To see the live example, click here!

Template for video without sound   To see the live example, click here!

Unzip the folder, open it and navigate to the 'shared_assets' folder. Here are the files you need to replace to create your own in-banner video. 

Please mind to keep the names of the files you add exactly the same as the once that are used right now:
  • preslide.png
  • endslide.png
  • overlay.png
  • video.mp4

We'll discuss the specifics and requirements one by one. After you're done, all you have to do is .zip the entire folder ('TemplateWithSound' or 'TemplateWithoutSound') and your banner is ready to be uploaded into Adactivate.

The Pre slide

The banner will start of with this preslide image, here you have the option to draw attention the user's attention to your video. The requirements are:

  • .PNG format
  • Size: 336x280 pixels. (This will automatically be scaled down for the 300x250 size)
  • Maximum file size of 100KB (Try https://tinypng.com/ to compress your image if necessary)

The End slide

After finishing the video, the banner will show your endslide image. The requirements are the same as the preslide. 

The Overlay

This image is shown with your video on top while the video is playing. The requirements are the same as for the pre- & endslide, with 1 more extra remark:

  • Of the 280 pixels in height, the video will fill 189pixels starting from the top. So while we do require you to make a 336x280 size image, you have effectively 336x91 pixels. The rest of the image will be overlapped by the video.

The video

For the video, the following is required:

  • .MP4 format
  • 16:9 aspect ratio
  • Maximum duration of 28 seconds (In order to not exceed the maximum of 30 seconds including animation)
  • Maximum file size of 2MB (Try http://www.videosmaller.com/ to compress your video file if necessary)

Final steps

Now that you've replaced the image and video files with your own, just zip the entire folder and you have a custom in-banner video set ready to be launched by Adactivate

Still need help? Contact Us Contact Us