From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

VBB

This tool lets you quickly and easily create video banners. You don't even have to know anything about the programming or HTML5.

You can reach this video banner creator tool in this page http://vbb.adform.com

Intro on creating banners with Video Banner Builder

  • Intro on creating banners with Video Banner Builder
    Files to prepare

    In order to create a banner you need to have:

    • A background image (same width and height as a banner itself);
    • A video file (or multiple files of the same video with different video formats, e.g.: .mp4, .ogv, .webm);
    • A poster image (same width and height as a video).

    VIDEO FILE FORMATS SUPPORTED BY DIFFERENT BROWSERS/DEVICES:

    Video Format Chrome Firefox Opera Safari Internet Explorer 9+ Edge Mobile web In-app
    MP4 + + + + + + + -
    WEBM + + + - - - - -
    OGV + + + - - - - -
    MPG - - - - - - + -
    Overall banner settings

    You need to:

    • Define a landing page URL and its Click Tag name;
    • Enter the width and height of your banner and select a background image;
    • Check social networks you will be using and the icon size of a social network (32x32 px, 64x64px, etc.);
    • Check a logo if you want to have it in your banner and you have separate logo image prepared.
    General Setting
    Configure video player

    Double click on a video player in banners preview and set these settings:

    • Set the width and height of a video player and select a poster image to be displayed before playing a video;
    • Choose one or more versions (formats like mp4/ogv/webm) of the same video file that will be played in a banner;
    • Click the "Submit" button in order to update the banners preview.

     Video Component Setting

    Double click on a logo (default logo is the one of Adform) in the banners preview and set these settings:

    • Choose your own logo file and enter a landing page URL for the logo.

     Logo Component Settings

    Configure social icons

    Double click on a specific social icon in the banners preview and set these settings:

    • Enter a landing page URL for the specific social icon. Usually it is your facebook or twitter page url.

     Social Buttom

    Positioning, preview and export

    After assigning all the prepared background, logo, video poster images and video files and setting all the Click Tag URLs, you also need to position components inside a banner. It can be done by dragging the components inside a banner preview or by double clicking on a specific component and setting the position (top/left px) parameter.

    When positioning and configuration is completed, you can export the banner using the "Export" button. The resulting ZIP pacakge can be uploaded to Adform platform or by pressing " Publish to Adform HTML5 Studio" banner can be exported directly to Adform Studio.

    Export

  • Functionality
    General banner settings

    First you are presented with a general banner settings panel. This panel allows setting overall parameters. Below is the list of the parameters that can be controlled:

    CLICK TAG and URL - allows defining name of the main clickTag and its URL. This clickTag is applied to the entire banner. If no clickTag is defined the background of a banner will not be clickable.

    SIZE - defines dimensions of an entire banner. After entering pixel values of width and height, the banner preview is automatically refreshed.

    BACKGROUND IMAGE - allows uploading JPEG/PNG/GIF image file that is applied as a background to an entire banner. The background image is centered if the uploaded image is of different dimensions than those entered in the Size parameter.

    ICONS SIZE - provides a selection of social icon sizes. These sizes are applied only to the social network icons (Facebook, Twitter, etc.)

    COMPONENTS - control is a list of checkboxes that allow adding additional elements to a banner. These components are:

    • LOGO - a user can upload a custom logo image of any size and position it onto the banner. Different clickTag can be assigned to the logo.
    • CLOSE BUTTON - close button of a standard Adform floating banner. This component is required when creating a Floating banner.
    • FACEBOOKTWITTERYOUTUBEG+LINKEDINPINTEREST - these allow adding Social Network icons onto the banner and assignings clickTags to them.

     General Setting

    Manipulating banner components in its preview

    In order to position components inside a banner you can drag video player, logo and social icons inside the banner area. When component is double clicked its configuration panel appears.

    Move It Move It

    Video player component configuration

     TITLE - allows defining description/short comment about a component. It does not affect the banner export.

    POSITION - defines position of components inside the banner. This can be entered as a number of pixels from top and leftcorner of a banner or this value is dinamically updated when you drag the component in the banners preview.

    SIZE - controls the entire width and height of the video player.

    VIDEO FILE - allows uploading a video file as one file or multiple versions of the same video with different file extensions - codecs. Having the ability to add multiple versions of the same video file is important as different devices and browsers support different video codecs.

    POSTER FILE - allows uploading a JPEG/PNG/GIF image file that is shown as a background of the video player when the state of it is initial and the video has not started playing.

    LOOP - starts playing a video from the beginning after it finishes.

    MUTED - initial video sound state is muted.

    AUTOPLAY - video starts automatically when the banner appears on the stage/website.

    In-ViewStart autoplay only when 50% of the banner is visible

    AUTOPAUSEStops playback/loop of the video autoplayed after 30 seconds. Property required by RTB exchanges.

    CONTROLS - enable hiding some of the video player controls. This is useful when you want to show just a video and e.g. mute button or only video, mute and play/pause button. As the video player contains only one video, which that is usually short and should not be fast-forwarded, there is, normally, no need for a seek bar or separate stop, back to the begining buttons.

    Video Component Setting

    TITLE - allows defining description/short comment about a component. It does not affect the banner export.

    POSITION - defines position of components inside the banner. This can be entered as a number of pixels from top and leftcorner of a banner or this value is dinamically updated when you drag the component in the banners preview.

    CLICK TAG and Landing Page Url - allow defining name of social network icon clickTag and it's Landing Page Url. This clickTag is applied to the social network icon. If no clickTag and Landing Page Url is defined the icon will not be clickable.

    Social Buttom
    Logo component configuration

    TITLE - allows defining description/short comment about a component. It does not affect the banner export.

    POSITION - defines position of components inside the banner. This can be entered as a number of pixels from top and leftcorner of a banner or this value is dinamically updated when you drag the component in the banners preview.

    CLICK TAG and Landing Page Url - allow defining name of social network icon clickTag and it's Landing Page Url. This clickTag is applied to the social network icon. If no clickTag and Landing Page Url is defined the icon will not be clickable.

    UPLOAD LOGO - allows uploading a JPEG/PNG/GIF image file and use that file as content of a component. As this component does not have dimensions setting the uploaded image has to be of a specific size that is required.

    Logo Component Settings