What is in-banner video?

In-banner video is just like a standard banner, except it has video inside. Video can be placed in the form of a standard rectangular video player or shown in a different, non-standard way, e.g as a background. The in-banner video can be any size, just like a standard banner ad — we prepare it according to the specification given in the media plan or by the publisher — usually, specification of the in banner video ad is the same like a standard ad, except added the maximum weight of the video file. 

General Guidelines for in-banner video:

  • initially, sound must be muted — can be turned on only after the user’s conscious action:
    • clicking on the loudspeaker icon
    • hovering for about 2–3 seconds
  • The video can be run with Autoplay, or be fully stopped
    • if video initially was stopped, it can be run after user action right away with the sound
  • The weight of the video file depends on the publisher specifications, usually, it is max ~2 MB
  • Duration of the video depends on the publisher’s specification — usually, max time is 15–30 seconds or unlimited

How to prepare in-banner video?

  1. You can start with this standard video player banner template or custom video player banner template that we prepared
  2. Replace background and add other visual elements of your brand
    1. you can move / scale video player if you want
  1. Replace video.mp4 file with yours (below you will find video optimization tips)
    1. If the video file name is different from ‘video.mp4’ (e.g. link to file from adserver) update the file name in the JS code of the video player
  1. Doubleclick on the ‘CLICKTAG_AREA’ layer and set Clicktag in JS code — choose from predefined or add your custom code based on the technical spec of the publisher.
  2. Publish banner
    1. If you want your banner to be responsive, just turn on it in Publish settings
  1. Prepare HTML file and optimize banner weight based on the technical spec of the publisher
  2. Preview banner in browser to check if everything is OK (visually and clicking)

Live preview of in-banner video with standard player: https://demo.dizply.com/p/ugke59_inbanner_video_750x300_HTML_v1

Live preview of in-banner video with custom player: https://demo.dizply.com/p/dwvoan_inbanner_video_custom_750x300_html_v1

How to optimize a video file:

  • resolution: make sure that the video has the right resolution (preferably same size as the video player) — when it is too big, you will have to set more compression and the image quality will be less
  • audio bitrate: the optimal minimum (quality vs. weight) is 96 kb/s, if your audio does not sound good in such bitrate, then try 128 kbps
  • framerate: if the video will be used in the banner, 24 fps is enough (videos are often rendered at 30 or 60 fps, so reducing the framerate will positively affect the image quality (less data to compress)
  • video bitrate: after applying the above, you should allocate rest of the ‘free’ weight to the video bitrate. Experiment with it to use the maximum of the weight given in publishers specification
  • encoding: if you do not have a Media Encoder at hand, you can optimize the video file online, eg using https://video.online-convert.com/convert-to-mp4 — there is even an option to enter the target weight of the file, so the tool will adjust video parameters for you


I hope that these few tips will help you quickly and efficiently prepare your next in-banner video ad.

I would like the knowledge contained here to be reliable and up-to-date. If something above is missing or mistaken, just let me know in the comments below.

If you have any questions or suggestions about what you would like to read in the next articles, feel free to contact me at mateusz@dizply.com

 

We want to help to make digital assets in a chaos-free and more productive way. We believe that production of online assets (even in high volume in a short time) can be done in control environment, without frustration and stress — this is why we created Dizply and this blog.