This procedure is intended for Page Designer administrators who need to display Vimeo video content on a Page Designer page.

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

Component Objective

The Video (Vimeo) Component displays a video hosted on Vimeo within a Page Designer page.

The component is intentionally simple.

Its configuration contains one required field:

• Video ID

The administrator does not enter the complete Vimeo URL. The component requires only the numeric Vimeo Video ID.

Vimeo Only

The component is specifically designed to work with Vimeo.

It does not support video IDs from:

• YouTube
• Other video-hosting platforms

A video ID from another platform will not work in the Video ID field.

Teoxane Global Vimeo Library

Teoxane uses a global Vimeo account for its video library.

Subsidiaries do not independently upload the video content required for this component.

When a subsidiary needs to make new video content available, it must liaise with HQ for the upload of the content into the Teoxane Vimeo library.

The workflow is therefore:

Video content

↓

Subsidiary liaises with HQ

↓

HQ uploads the video to the global Vimeo library

↓

Vimeo URL becomes available

↓

Administrator extracts the numeric Vimeo Video ID

↓

Video ID is added to the Video (Vimeo) Component

Understanding the Vimeo Video ID

The component requires the numeric ID contained within the Vimeo URL.

For example:

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

The Video ID is:

1218263037

Only this numeric value should be entered into the Video ID field.

Do not enter the entire Vimeo URL.

Do not include the additional characters appearing after the numeric ID.

For the example above:

URL element	Use in Video ID field?
https://vimeo.com/	No
1218263037	Yes
/8e87789fd6	No
?fl=ip&fe=ec&share=copy	No

The value entered into Page Designer should therefore simply be:

1218263037

Placement and Compatibility

The Video (Vimeo) Component can be used in any Page Designer layout.

There is no specific mandatory placement.

The administrator should nevertheless use common sense when deciding where to position the video.

The selected area should provide enough space for the video to display appropriately.

Technical compatibility with a layout does not automatically mean that every possible placement will result in a good page composition.

Versatility

The Video (Vimeo) Component is versatile in terms of placement but specific in terms of functionality.

It can be incorporated into different Page Designer compositions whenever Vimeo video content is required.

However, its purpose remains straightforward:

Display a Vimeo video using its numeric Vimeo Video ID.

There are no additional text, image or CTA elements configured through this component.

Vimeo Is Required

The Video (Vimeo) Component only works with Vimeo video IDs.

Do not enter:

• A YouTube video ID
• An ID from another video platform

These IDs will not work with the component.

Subsidiaries Must Liaise With HQ for New Video Uploads

Teoxane uses a global Vimeo account and library.

If a subsidiary needs new video content to be uploaded, it must liaise with HQ for the upload of that content into the Teoxane Vimeo library.

The video needs to be available on Vimeo before its Vimeo Video ID can be used in Page Designer.

Do Not Paste the Complete Vimeo URL

The Video ID field does not require the full Vimeo URL.

Extract and enter only the numeric Vimeo Video ID.

For example:

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

becomes:

1218263037

Do Not Include Additional URL Characters

Do not include additional characters appearing after the numeric ID.

Only the digits identifying the Vimeo video should be entered.

Video ID Is Required

The Video ID field is mandatory.

The component cannot be completed without a Video ID.

Use Common Sense When Choosing a Layout

The component can be used in any layout, but the selected area should provide enough space for the video to display appropriately.

Do not squeeze the video into an unsuitable space simply because the layout technically accepts the component.

1. Confirm That the Video Is Available in the Teoxane Vimeo Library

Before configuring Page Designer, determine whether the required video is already available in Teoxane's global Vimeo library.

If the video is already available, proceed to obtain its Vimeo URL.

If the video is not yet available, the subsidiary must liaise with HQ.

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

If new video content needs to be added, contact HQ and arrange for the content to be uploaded to the global Teoxane Vimeo library.

Do not attempt to replace this step by hosting the video on YouTube or another platform and using that platform's ID.

The Page Designer component requires Vimeo.

3. Obtain the Vimeo URL

Once the video is available in the global Vimeo library, obtain its Vimeo URL.

For example:

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

4. Identify the Numeric Vimeo Video ID

Locate the numeric video identifier within the Vimeo URL.

Using the example:

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

The required Video ID is:

1218263037

Only retain these digits.

5. Choose the Video Placement

Determine where the video should appear within the page.

The Video (Vimeo) Component can be used in any Page Designer layout.

Use common sense when selecting the location and ensure that the available space is appropriate for displaying video content.

6. Add the Video (Vimeo) Component

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

Drag and drop the component into the required location.

Open the component configuration.

7. Enter the Video ID

Locate the required Video ID field.

Enter only the numeric Vimeo Video ID.

Using the previous example, enter:

1218263037

Do not enter:

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

Do not enter:

8e87789fd6

Enter only:

1218263037

8. Review the Video ID

Before saving, confirm that:

• The video is hosted on Vimeo.
• The video is available through Teoxane's global Vimeo library.
• The correct video has been selected.
• Only the numeric Vimeo Video ID has been entered.
• No Vimeo URL elements have been included.
• No additional characters after the numeric ID have been included.
• The ID does not originate from YouTube or another video platform.

9. Click Apply

Once the correct Vimeo Video ID has been entered, click Apply to save the Video (Vimeo) Component.

10. Validate the Video on Staging

Validate the completed page on the appropriate staging storefront.

Confirm that:

• The intended Vimeo video displays.
• The correct video has been embedded.
• The video loads correctly.
• The video works within the selected Page Designer layout.
• The available space is appropriate for the video.
• The video displays appropriately across the required responsive views.

If the expected video does not display, first verify that the value entered into Video ID is the correct numeric Vimeo ID and not a complete URL or an ID from another platform.

The key principle is:

Video (Vimeo) is a Vimeo-only component. Subsidiaries liaise with HQ to add content to Teoxane's global Vimeo library, then enter only the numeric Vimeo Video ID in Page Designer.