UI components · Content display
Video Player
Also called: Player, Media player, Video embed, Video
The area that plays video on a page. It's the picture plus a control bar (play / pause, progress bar, time, volume, speed, captions, fullscreen), and before playback it shows a cover image with a centered play button.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a video player to the course page: full content width, 16:9, 12px corner radius, black background. Before playback, show the course cover with a 64px semi-transparent round play button in the middle and the duration "10:30" in the bottom right corner. During playback, show a control bar at the bottom over a semi-transparent black gradient that fades upward: play / pause and "02:15 / 10:30" on the left; a draggable progress bar in the middle (played part white, buffered part light gray, with a thumbnail preview of that moment on hover); and volume, speed (0.75x–2x), captions toggle, picture-in-picture, and fullscreen on the right. Hide the controls after 3 seconds without mouse movement. Don't autoplay, and use preload="metadata". Support Space to play / pause and the left / right arrow keys to skip 5 seconds, and remember where the user left off.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Video Player is what you need.
Use Video Player when
- Online courses, tutorials, and product demos that users need to watch all the way through
- Embedding a promo or how-to video on a marketing site or product page
- Stream replays and meeting recordings where users need to scrub and change speed
Pick something else when
A muted, looping background video in a hero that just sets the mood. It doesn't need controls.
A few images shown in rotation
Use insteadCarouselA few-second demo animation. A GIF or a small muted, looping video is lighter.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Autoplaying a video with sound as soon as the page opens, with no easy way to mute it
- 02
No cover image and no reserved space, so the video pushes everything below it down when it loads
- 03
A progress bar that's too thin and can't be dragged, so you can only watch from the start and can't jump ahead
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
The video picture, a cover image with a centered play button before playback, and a bottom control bar (play / pause, progress bar, time, volume, speed, captions, fullscreen).
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A video player is the picture plus a control bar. Before playback, it shows a cover image (the poster) with a big round play button in the middle. Once playing, the control bar floats at the bottom of the picture: play / pause and a "02:15 / 10:30" time on the left, a draggable progress bar in the middle (with the buffered part a bit lighter), and volume, speed, captions, picture-in-picture, and fullscreen on the right. The bar hides itself when the mouse stops moving for two or three seconds. Courses, product demos, marketing videos, and stream replays all use it. You can use the browser's video tag with controls, a library like Video.js or Plyr for a consistent look, or embed a YouTube or Vimeo player.
How it differs from a Carousel: a carousel auto-rotates through a few images, while a video player plays one continuous video that the user controls. How it differs from an Image Preview: an image preview opens a large image to see details, while a video player has a timeline and sound. The muted, looping background video in a marketing hero is just decoration with no controls, so it doesn't count as a player.
Match the cover image to the video's aspect ratio (usually 16:9) and reserve the space up front so the page doesn't jump when it loads. Don't autoplay video with sound. If it must autoplay, mute it and show a clear "turn on sound" button. Video files are large, so use preload="metadata" or load on click, and give long videos captions and speed controls. Support the keyboard (Space to play / pause, left and right arrows to skip back and forward), and let Esc exit fullscreen.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-video-player- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
video[controls]video:not([autoplay][muted][loop]).video-js.plyr.xgplayer.dplayer.prism-player.jwplayer.mejs__containermedia-playermux-playerlite-youtubeiframe[src*="youtube.com/embed"]iframe[src*="youtube-nocookie.com/embed"]iframe[src*="player.vimeo.com"]iframe[src*="player.bilibili.com"]
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
video-playervideoplayermedia-playervideo-embedyoutube-embed
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
VideoPlayerReactPlayerMediaPlayerPlayerYouTubeEmbedLiteYouTubeEmbed
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<video>
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with media
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026