shadcn.io is not affiliated with official shadcn/ui
Poster and Playlist Video Introductions Team Block for Vue
Four video introductions from a customer-story studio as a framed poster drawn from UI beside a playlist of four rows with fixed durations, where the Watch button is a link to the film's own page and nothing plays on the page.
Installation
Overview
A video-introductions section for Vue with Ark UI, for Moorside, a customer-story studio. A reverse split with a divider: the poster comes first in the DOM, in a framed 16:9 box drawn from UI (a large initials disc, a caption line, a name plate, a duration chip and a control bar with an empty progress line), with the person's name, role and first line as a real caption under it; beside it sit the header and a playlist of four intros, each row an initials avatar, a name, a role and a fixed duration. Pick a row and the poster changes. Nothing plays on this page: the poster is a drawing, and Watch, the one Shine Button, is a link to the film's own page, with a line under it that says so. On a phone the poster comes first, then the playlist. It's built from Toggle Group, Avatar, Shine Button and Guides, with CSS entrances and your theme's tokens. For about pages and sales pages that want faces before a call. The people, their lines and the durations are made up.
FAQ
How do I change the people and the films?
Edit INTROS at the top of the file. An intro is a name, a first name, a role, a caption (the film's first words), a fixed duration ("1:42") and the href of the page that holds the film. The poster, the caption under it, the Watch link and the playlist row are all drawn from that one entry, so adding a person is one object.
Why doesn't anything play?
The poster is a drawing made of the page's own elements, and its control bar shows an empty progress line that never moves; the whole drawing is hidden from assistive technology. Watch is an ordinary link, so the player, the consent for a video host and the data it loads stay on the page that owns the film. To play in place, put your player where the poster is and keep the poster as its placeholder.
What does Watch do?
It follows href, which in this example is # because the films are invented. Its label names the picked person and carries the duration for screen readers ("Watch Hana's intro (2:05)"). Watch takes asChild with the link inside, so it can be your router's link.
How does the playlist work with a keyboard and a screen reader?
It is a group of toggle buttons named Introductions, with exactly one picked at all times. Tab moves into it and the arrow keys move between the rows, picking as they go; a polite status line says which introduction is shown. The picked row is a solid foreground bar, so it reads without colour.