The Video player in Bannerflow allows you to use the power of video in your display ads. It is believed that viewers remember 9-10x more of a message when shown as a video, rather than text.
Bannerflow can now also host your videos. For a minimal fee per video impression, you can store all of your video material with us, and only pay for what you use in your ads. For more information regarding Bannerflow’s video hosting, please contact your customer success manager. Should you have videos hosted and served elsewhere, you can also use these with no added expense.
In order to ensure the best possible performance on consumers web browsers and devices, your video has to be .mp4 and the recommended maximum weight is 1000 kB, but the smaller the better. There are several tools for optimising video.
For single videos, you can convert using the following websites to optimise your videos:
- Convert to .mp4
- Trim your video so that you are only using as much as necessary. A video that is longer than you need for your ad will quickly make it heavier than necessary.
- Compress to a smaller resolution. For a banner that is 300x250, your video does not need to be bigger than 360p - (480x360)
- Compress video to a smaller resolution and file size
- Compress with “high quality”
- Remove audio from your video file
For multiple videos, however, you will save time by downloading the following video compression tool which compresses and converts video files in bulk. Compressing the video to reduce the file size is recommended to do using https://handbrake.fr/ and by using this Compression profile.
How to use
The Video player is used by dragging and dropping the widget to the banner canvas.
Navigate to the video player widget by opening the Widget tab in the media library, and searching for "Video player". Drag and drop to the canvas.
Double click on widget and paste in the URL to your video.
👉 Please note: The Bannerflow video player only supports the format .mp4. This is the best supported video format among all browsers.
There's a bunch of settings available for the video player found in the style panel which allows you to tweak the playback of the video to your liking. Below is a list of all settings and what they do.
Mouse interaction: Enables mouse interaction which may be needed to utilise any of the interactive elements and settings.
Autoplay: Defines whether or not the video should automatically start playing once it’s in focus.
Controls: Defines whether or not the video controls should be visible or not. If On, it replaces the play/pause button that is visible if autoplay is Off.
Loop: Defines whether or not the video should loop once it reached the end time.
Loop with banner: Defines if the video should loop when the banner loops or if it should play continuously.
Start time: Defines on which second of the video it should start playing on. Defined in seconds.
End time: Defines on which second of the video it should end playing on. Defined in seconds.
Playback speed: Defines at which speed the video should play. Playback speeds between x0.5 and x2 are available. 1x is regular speed.
Volume (0-100%): Sets the default volume of the video (if the video contains audio). This is also the volume level that will be used if “Sound on click” or “Sound on hover” is On.
Sound on click: Enables the sound (based on Volume) when clicking on the video. This setting overrides controls. Mutes the video when mouse pointer is no longer on top of the video.
👉 Please note: This setting only works if Autoplay is ON.
Pre-load image: If a pre-load image have been selected it will be displayed before the video loads/starts. Any images in the media library can be used for this.
Fallback image: If a fallback image has been selected it will be used as a fallback for the video when displayed on devices without support for inline auto-playing playback (for example iOS 9 and below). It will also replace the video part of the fallback image of the banner. But if no image is selected, the video player will instead use the first frame if the video according to the start time set by the user.
Fill: Contain makes the whole video display inside the bounding box. Cover makes the video always cover the bounding box.
Background: Defines the background color for the video player. This color will only be visible if the fill setting is set to Contain.
Play/pause button size: Defines the size of the Play/Pause button that is displayed when Controls and Autoplay is set to Off.
- Autoplay with Sound: Most browsers will mute videos with sound that are set to autoplay. Therefore, ensure you have enable a way for the user to turn on the sound if they are interested. Click for Sound or Controls = on will all get this done.
- Autoplay without sound: If you have a video with sound, but want it to autoplay, then ensure that volume is set to 0. If you do this, then all web browsers will see this video as muted, and will autoplay it
- Fallback images: Major browsers such as Chrome and Safari are trying to reduce the amount of auto playing videos in order to improve user experience on their browsers. Therefore, ensure you are choosing a suitable fallback image so that your ad is delivering the right message at all times.
- Autoplay video backgrounds: Videos without sound will always autoplay, so ensure you have removed the audio track from your video, or set volume to 0.
Editor native styles + Video player
Not all editor native styles works together with the video player for different reasons. The following are the style settings that can be used; Opacity, Border, Background color, Radial gradient, Linear gradient, Visibility, Shadow.
👉 Please note: Certain phones, especially older ones, do not support inline autoplay.
All modern mobile operating systems and browser today have support for inline autoplay of video content. However, people out there that views the banner on old devices will be shown a fallback image instead of the video. Either an auto generated image from the video or the fallback image selected in the video widget settings.