Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Player Frame Video Blog Block for Vue

Four video lessons as cells: each cover is a drawn player frame with a poster pattern, a play mark and a scrub bar with a tick for every chapter, a duration badge, the title and the date.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A video posts block for Vue with Ark UI, written for Reelwick, a film school's video journal. A compact header with an "All videos" link sits over four lessons as cells on shared hairlines, two across from lg, that run from rail to rail and end the block. Each cell is one link, its title, and shows a drawn greyscale player frame (a poster pattern that is different for each lesson, a play mark, and a scrub bar with a tick at every chapter), a duration badge, the chapter count, a one-line dek and the presenter and date. It's built from Badge, Avatar, Button and Guides. For a channel, a course's lessons or any video list that has chapters. Nothing plays here: the frame is a drawing, and the title links to the lesson's page.

FAQ

How is the player frame drawn?

One SVG per cover: a pattern of hairlines or dots (rings, hatching, a dot ramp or sway lines, one per lesson), a foreground circle with a play triangle, and a control bar with a scrub track. Each chapter is a short tick on the track, placed from its start as a percentage of the video. The strokes stay one pixel wide at any size, and the whole cover is hidden from assistive technology.

Can I use a real thumbnail?

Yes. The cover's frame sets the ratio, the ring and the radius. Replace the drawing inside it with an img that has size-full object-cover and an empty alt (the title is the link's text).

Where do the chapter marks come from?

From each lesson's chapters array: the starts as percentages. The chapter count in the text is that array's length, so the ticks and the count always agree.

Does it play the video?

No. The title is a link to the lesson's page, where your player belongs. The block never shows a fake player that does nothing.

How does it fit on a phone?

Each cell becomes a row with the player frame as a small thumbnail at the end, the duration and chapters above the title and the presenter below; the dek is dropped. Between sm and lg the cells are one column with the frame at the start.

Does it work right to left?

Yes. Text, cells and the header link mirror (the arrow flips). The durations and dates are isolated with bdi, and the frame keeps its direction because it is artwork.

All 100 blog blocks