This procedure is intended for Page Designer administrators who need to create a banner using a Vimeo video as the visual background, with optional text and CTAs.

Teoxane uses a global Vimeo account and library. Subsidiaries requiring new video content must liaise with HQ to have the video uploaded before it can be used in the Video Banner (Vimeo) Component.

Component Objective

The Video Banner (Vimeo) Component creates a banner using a Vimeo video instead of a static image.

The component combines:

• A predefined banner format
• A Vimeo video
• Configurable content positioning
• Configurable desktop text alignment
• Mobile-specific content positioning
• Mobile content-box background treatment
• Legacy rich-text content
• Text contrast controls
• Optional background overlay
• Up to two optional CTAs

It is therefore designed for situations where a video needs to provide the visual impact of a banner while still supporting accompanying content and navigation.

Banner Type

The required Type setting determines the banner format.

The available formats are:

Type	Dimensions
Full	1440 × 810 px
Half	1440 × 450 px
Third	1440 × 300 px

The width remains 1440 px, while the height changes according to the selected Type.

Select the Type according to the amount of visual prominence and vertical space required by the banner.

Vimeo Video

The required Video ID determines which Vimeo video is displayed.

The component is specifically designed for Vimeo.

It does not support video IDs from:

• YouTube
• Other video-hosting platforms

Teoxane Global Vimeo Library

Teoxane uses a global Vimeo account and video library.

If a subsidiary needs to use new video content that is not yet available in the library, it must liaise with HQ for the upload.

The workflow is:

New video content

↓

Subsidiary liaises with HQ

↓

HQ uploads the video to the global Vimeo library

↓

Obtain the Vimeo URL

↓

Extract the numeric Vimeo Video ID

↓

Enter the numeric ID in the Video Banner Component

How to Identify the Vimeo Video ID

Do not paste the complete Vimeo URL into the Video ID field.

For example:

https://vimeo.com/1218263037/8e87789fd6?fl=ip&fe=ec&share=copy

The Video ID is:

1218263037

Only enter:

1218263037

Do not enter:

• https://vimeo.com/
• /8e87789fd6
• URL parameters
• The complete Vimeo URL

The Video ID should contain only the numeric Vimeo identifier.

Content Alignment

The Content Alignment setting controls the position of the content block within the banner on desktop.

The content can be positioned:

• Left
• Center
• Right

This determines where the overall content area sits in relation to the video banner.

Content Position on Mobile

The required Content Position (Mobile) setting controls how the banner content is presented on mobile.

Two approaches are available:

Overlay

The text and CTAs remain over the video.

Use this option when the video provides sufficient visual contrast for the content to remain readable.

Below

The text and CTAs are displayed below the video rather than over it.

This separates the content from the visual on mobile and allows the content to use its own background treatment.

This setting applies specifically to the mobile presentation.

Content Box Background Color

The Content Box Background Color setting applies on mobile when Content Position (Mobile) is set to Below.

The available background treatments are:

• Primary: Teoxane purple
• Secondary: another shade of purple
• Pink
• Taupe

Choose the background treatment according to the intended visual presentation and text contrast.

When using a colored content box, also consider whether Invert text color is required to maintain readability.

Content

The Content field contains the textual content displayed within the banner.

It uses the legacy rich-text editing experience.

The same general limitations associated with the legacy Textbox approach apply.

Do not expect the granular formatting freedom available in Textbox Plus.

Text Alignment on Desktop

The required Text Alignment (Desktop) setting controls the alignment of the text itself.

Available options are:

• Left
• Center
• Right

This setting should not be confused with Content Alignment.

• Content Alignment determines where the overall content block sits within the banner.
• Text Alignment (Desktop) determines how the text itself is aligned within that content area.

The Text Alignment setting overrides the alignment applied inside the text block.

Invert Text Color

Enable Invert text color when the normal text color does not provide sufficient contrast against the selected presentation.

When enabled, the text becomes white.

This applies regardless of device.

The option is particularly useful when text is displayed over darker video content or over a mobile content-box background requiring white text.

Background Overlay

The Background overlay option adds another method of improving content readability when text appears over the video.

Video content can change continuously. A frame that provides good contrast at one moment may provide weaker contrast at another.

The Background Overlay can therefore be enabled to provide additional contrast between the video and the content displayed over it.

It can be used together with Invert text color when stronger contrast is required.

The two settings serve complementary purposes:

• Invert text color makes the text white.
• Background overlay adds an overlay over the video to improve contrast.

Optional CTAs

The Video Banner supports up to two optional CTAs.

The component can therefore be configured with:

• No CTA
• One CTA
• Two CTAs

Each button provides:

• Text
• Link
• Style

Only add CTAs when they provide a meaningful next action related to the banner content.

Vimeo Only

The Video Banner (Vimeo) Component only works with Vimeo.

YouTube IDs and IDs from other video platforms will not work.

Subsidiaries Must Liaise With HQ for New Uploads

Teoxane uses a global Vimeo library.

If the required video has not yet been uploaded, subsidiaries must liaise with HQ to have the content added.

Enter Only the Numeric Video ID

Do not paste the complete Vimeo URL into Video ID.

For:

https://vimeo.com/1218263037/8e87789fd6?fl=ip&fe=ec&share=copy

enter only:

1218263037

Video ID Is Required

The component cannot be completed without the required Video ID.

Content Alignment and Text Alignment Are Different

Do not confuse:

• Content Alignment, which positions the content block
• Text Alignment (Desktop), which aligns the text within that content area

Mobile Content Position Must Be Configured

The required Content Position (Mobile) determines whether the content remains over the video or moves below it.

Always consider the mobile experience independently from desktop.

Content Box Background Color Is for the Mobile Below Presentation

The Content Box Background Color becomes relevant when mobile content is positioned Below the video.

Choose the background and text contrast together.

Consider Contrast Throughout the Video

Unlike a static image, the visual underneath the content changes while the video plays.

Use Invert text color and Background overlay where necessary to maintain sufficient contrast.

Legacy Text Limitations Apply

The Content field uses the legacy rich-text editor.

Do not expect Textbox Plus formatting capabilities.

CTAs Are Optional

The component supports up to two CTAs.

Do not add buttons simply because the fields are available.

1. Determine Whether a Video Banner Is Appropriate

Confirm that the content requires a banner presentation using video rather than a standard embedded video or static-image banner.

The Video Banner combines Vimeo content with banner text, positioning and optional CTAs.

2. Confirm That the Video Is Available in the Global Vimeo Library

Determine whether the required video is already available through Teoxane's global Vimeo account.

If it is available, obtain its Vimeo URL.

If it is not available, liaise with HQ.

3. Liaise With HQ for a New Video Upload When Required

If the subsidiary has new video content, contact HQ to arrange for the video to be uploaded into the global Teoxane Vimeo library.

Wait until the Vimeo video is available before configuring its Video ID in Page Designer.

4. Obtain the Vimeo URL

Obtain the Vimeo URL for the intended video.

For example:

https://vimeo.com/1218263037/8e87789fd6?fl=ip&fe=ec&share=copy

5. Extract the Numeric Vimeo Video ID

Identify the numeric portion immediately following vimeo.com/.

From:

https://vimeo.com/1218263037/8e87789fd6?fl=ip&fe=ec&share=copy

retain:

1218263037

Do not retain the rest of the URL.

6. Add the Video Banner (Vimeo) Component

Locate Video Banner (Vimeo) in the Page Designer component list.

Drag and drop it into the required location.

Open the component configuration.

7. Select the Banner Type

Locate the required Type field.

Select:

• Full: 1440 × 810 px
• Half: 1440 × 450 px
• Third: 1440 × 300 px

Choose the format appropriate for the intended banner presentation.

8. Enter the Vimeo Video ID

Locate the required Video ID field.

Enter only the numeric Vimeo Video ID.

For example:

1218263037

Do not enter the complete URL or an ID from another video platform.

9. Configure Content Alignment

Locate Content Alignment.

Select:

• Left
• Center
• Right

Use this setting to determine where the overall content block should sit within the desktop banner.

10. Configure Content Position on Mobile

Locate the required Content Position (Mobile).

Choose between:

Overlay

The content remains over the video.

Below

The content appears below the video.

Choose according to the intended mobile experience and content readability.

11. Configure the Mobile Content Box Background Color

If the mobile Content Position is Below, configure Content Box Background Color.

Select the appropriate available option:

• Primary
• Secondary
• Pink
• Taupe

Consider the relationship between the selected background and the text color.

12. Enter the Banner Content

Locate Content.

Enter and format the required banner copy using the available legacy rich-text controls.

Remember that this editor does not provide the enhanced formatting freedom of Textbox Plus.

13. Configure Desktop Text Alignment

Locate the required Text Alignment (Desktop) field.

Select:

• Left
• Center
• Right

This controls the alignment of the text itself and overrides the alignment configured within the text block.

Remember:

Content Alignment = position of the content block

Text Alignment = alignment of the text inside it

14. Determine Whether Text Color Should Be Inverted

Review the text against the video.

If additional contrast is required, enable Invert text color.

When enabled, the text becomes white.

Also consider the selected mobile Content Box Background Color where the mobile content is positioned Below.

15. Determine Whether a Background Overlay Is Required

Review the readability of the content over the video.

If the changing video imagery makes the content difficult to read, enable Background overlay.

This can be combined with Invert text color when stronger contrast is required.

16. Configure the First Button if Required

If a CTA is needed, configure the First Button:

• Text
• Link
• Style

If no CTA is required, leave it unused.

17. Configure the Second Button if Required

If a second relevant CTA is required, configure the Second Button:

• Text
• Link
• Style

Otherwise, leave it unused.

The component can therefore contain zero, one or two CTAs.

18. Review the Complete Configuration

Before saving, confirm that:

• The selected Type is appropriate.
• The video exists in Teoxane's global Vimeo library.
• Only the numeric Vimeo Video ID has been entered.
• Content Alignment is correct.
• Mobile Content Position is correct.
• Content Box Background Color is appropriate when mobile content is positioned Below.
• Content has been configured appropriately.
• Desktop Text Alignment is correct.
• Invert text color provides appropriate contrast where enabled.
• Background overlay provides sufficient contrast where enabled.
• The appropriate number of CTAs has been configured.
• CTA Text, Link and Style are correct where used.

19. Click Apply

Once the configuration is complete, click Apply to save the Video Banner (Vimeo) Component.

20. Validate on Staging

Validate the completed page on the appropriate staging storefront.

On desktop, confirm that:

• The correct Vimeo video displays.
• The selected banner Type produces the intended presentation.
• The content block appears in the intended position.
• Text alignment is correct.
• Text remains readable while the video plays.
• Invert text color works correctly where enabled.
• Background overlay provides sufficient contrast where enabled.
• CTAs display and work correctly where used.

On mobile, confirm that:

• The video displays correctly.
• The content uses the selected Overlay or Below presentation.
• When Below is used, the selected Content Box Background Color displays correctly.
• Text remains readable.
• The selected contrast settings remain appropriate.
• CTAs remain accessible and work correctly.

Because video imagery changes over time, do not validate readability against only a single frame. Make sure the text remains sufficiently readable while the video is playing.

The key principle is:

The Video Banner combines a Vimeo video with a complete banner experience. Use only content from Teoxane's global Vimeo library, enter only the numeric Vimeo Video ID, configure desktop and mobile content presentation deliberately, and use Invert text color and Background overlay when additional contrast is required.