Video player
Bootstrap 5.3 patterns for responsive video: .ratio helpers, iframe embeds, native <video>, modals, tabs, list “playlists”, and overlays. Toggle light/dark to check borders, cards, and chrome around players.
Ratios · embeds · HTML5
Use .ratio-* so 16×9, 4×3, and square players keep proportions. Pair with rounded-*, border, and shadow for polished UI. Always set a meaningful title on iframes for screen readers.
Iframe
YouTube · 16×9
https URL, title, and restrictive allow attributes.
Iframe
Vimeo · rounded chrome
Helpers
Aspect ratios · same clip, different frames
ratio-16x9
ratio-4x3
ratio-1x1
Cropping is controlled by the host player inside the frame; the ratio box only reserves space on your page.
Native
HTML5 · poster · object-fit
object-fit: cover fills the ratio box via .video-showcase .ratio > video.Tabs
Switch source without leaving the card
Lazy Vimeo: first frame loads when you open this tab (see script below).
Native audio with themed controls (no separate ratio helper).
Playlist UI
List group
Cinematic
21×9 · primary accent
Hero-style strip for landing pages; pair with .ratio-21x9 (Bootstrap 5.3+).
Chrome
Toolbar · compact player
Offcanvas
Related clips drawer
Slide-over queue for courseware or binge UI.
Accessibility
Transcript · collapse
[00:00] Placeholder transcript block — swap for captions file or server-rendered cues.
[00:12] Keep focus order logical when expanding; avoid trapping keyboard inside the player only.
[00:30] Link to downloadable VTT for power users.
Nested data-bs-theme="dark"
Player on a local dark surface
Borders and shadows use the nested theme’s tokens so the frame still reads when the rest of the page is light.
- Wrap strip in
data-bs-theme="dark" - Use
border-secondaryfor subtle edges - Match CTA buttons to the strip theme
Up next
Chapter 2 — wiring data
12:08
Chapter 3 — deploy
7:55
Swap iframes for static thumbnails in production to avoid many concurrent embeds.