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 with 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 off with this pre slide image, here you have the option to draw attention to 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 end slide image. The requirements are the same as the pre slide.
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- & end slide, 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.