(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.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/video-player

Guidelines

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.

...