Proximus Media Guides

Video background

The video background banner is at the top of homepage and promote a product/service.

last modified: 01/01/1601 01:00:00

Overview

The homepage banner allows you to promote a product or service at the top of the homepage page with a full background video. It works just like the image background banner. This banner can be used on top of each Business Unit homepage:

Residential homepage - Small entreprise homepage - Corporate homepage

Live demo (for Proximus employee): Residential homepage

Anatomy

Here is a quick overview of what a background video banner contains to better understand this documentation:

  1. Background video
    Background video of the banner, it takes the full width of the page.
  2. HTML content
    This HTML content is used to promote the product/service. It consists of the components of the Design System, which are usually: a heading, a subtitle, a promo patch with its info and a button.
  3. Perso box
    The perso box is a white panel which is not part of the banner but which overlays the banner.
  4. Video controls
    Unmute/mute or play/pause video controls.
Accessibility - Video

Controls are mandatory for accessibility reasons.
More info about video requirements.
More info about media player requirements.

Gridding

When using a banner with a background video, the video covers the entire banner in full width. HTML content comes on top of the video such as the perso box. The banner is designed in such a way as to leave a free space for the important elements of the visual. When creating the video, this is where the key elements of the campaign such as main character, faces, devices, objects should be located.

In the classic 12-column gridding, the text content takes:

  • Mobile: 7 columns for copy - 5 columns free space for the important elements of the video
  • Tablet: 6 columns for copy - 6 columns free space for the important elements of the video
  • Desktop: 5 columns for copy - 7 columns free space for the important elements of the video
Desktop
Mobile

Modes

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

Accessibility - Contrast is the most important consideration

Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.

The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast

last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Produce the media for mobile (-s) and tablet/desktop (-l).
  2. Respects the margins and safe areas.
  3. Make sure that the main content isn’t placed behind the header, perso box or in the copy (e.g.: main character, faces, devices, objects).
  4. Make sure the area behind the header and content is dark enough for readability.
  5. Test your video and adapt if needed.
  6. Make sure your video is not too heavy and export via Adobe media encoder queue if needed.
  7. Upload your video via Vimeo.
Template download

You're part of Proximus organization? Go to the template - If not, request it

Technical specifications

Please respect the following specifications when you export the images:

Breakpoints Size Max weight Format
Mobile (-s) 640x900px 20MB .mp4
Tablet & desktop (-l) 2560x480px 30MB .mp4

Naming convention

Please respect the following naming convention:

  1. Prefix: hp-banner-video
  2. Name
    Use the name of the product, service, campaign,...
  3. Date
    yymm = year month (2108 = August 2021)
  4. Breakpoint
    mobile (-s), tablet (-m), desktop (-l)
  5. Language
    English by default (-en), French (-fr), Dutch (-nl). If it exists in only one language, it isn't mandatory to specify.