(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Video Player

Link to Figma: tba

Overview

• The Video Player Component is a media player for embedding and playing video content.
• It provides configurable controls and playback options.
• It is suitable for training videos, product demos, or instructional content.
• The component integrates video media into application UIs.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "productDemoVideo" enables targeted manipulation of this specific video player component through scripts or automated testing.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "product-demo-video" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the video player can be highlighted during onboarding or tutorial flows to draw user attention to important video content.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Product Demo Video", "de-DE": "Produktdemo-Video"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Watch this video to learn how to use the product", "de-DE": "Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das Produkt verwenden"} provides detailed instructions during guided tours.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

• Provide a clear label using title so users immediately know what the video covers.
• Set the media source with url; use a templated value when the video depends on context data (url).
• Show playback controls when user control is expected by setting showControls: true.
• Enable immersive viewing for detail-heavy content by turning on allowFullscreen.
• For ambient/looping visuals, combine autoplay: true, mute: true, and (optionally) loop: true; hide controls if interaction isn’t needed with showControls: false.
• Provide a pre-play cue with thumbnail so the player communicates its subject before playback.

Sizing & Layout

• Add breathing room around the player with paddingClass (e.g., a tokenized spacing class).
• Keep title concise to avoid truncation and visual crowding.
• In dense views, reduce chrome by turning showControls: false if the video is purely illustrative (e.g., background/loop).

States & Feedback

• Avoid unexpected audio: if autoplay: true, also set mute: true.
• For short demos, use loop: true; keep showControls: true when users may pause or scrub.
• When autoplay: false, provide a meaningful thumbnail to signal the content and affordance to play.
• Expose the fullscreen affordance with allowFullscreen when careful inspection is likely.

Data-Driven / Conditional Behavior

• Drive the selected video from context by templating url (e.g., per product or locale).
• Show the player only when prerequisites are satisfied with displayConditions (e.g., after a step is completed).
• Use displayConditions to prevent rapid flicker by defining a single, mutually exclusive rule set for visibility.

Visibility & Authorization

• Gate premium or restricted content with visibilityPolicySetId so unauthorized users never see the player.
• Use displayConditions for fine-grained visibility based on app state (e.g., completion flags).

Content & Localization

• Use displayName to keep the component recognizable in authoring tools without changing user-facing text.
• For onboarding, localize tour copy via enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Dos & Don’ts

Accessibility

• Programmatic name: title.
• Built-in media controls for keyboard/AT: showControls.
• Magnification support: allowFullscreen.
• Testability hooks for a11y automation: id, dataTestId.
• Localized guidance when spotlighting the player: enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
• Note: The Article lists no caption/subtitle or contrast/color tokens.
• If captions or transcripts are required, the component itself does not provide them; plan content accordingly given the Article’s limits.
• Prefer showControls: true whenever the video contains essential information; avoid control-less playback for critical content.
• Use localized hotspot text to provide non-visual guidance during tours via guidedTourHotSpotTitle and guidedTourHotSpotDescription.