An editorial video player for Framer portfolios and studios. Show a large stage with play overlay, then let visitors pick from a clean playlist rail - each item embeds YouTube on click (including Shorts).
Designed for motion reels, project walkthroughs, and film indexes that should feel like part of the site - not a default YouTube embed block.
What's included
Large stage with thumbnail, play affordance, and click-to-embed
Playlist rail with active/hover states
Up to 12 videos: label, type, YouTube video ID, Shorts flag
Auto / desktop / mobile layout modes + breakpoint control
Typography controls for meta, title, and playlist rows
Color controls for text and borders
Open on YouTube external link
Canvas-safe / reduced-motion aware behavior
How to use
1. Paste the code component into your Framer project
2. Add YouTube video IDs (not full URLs) in the Videos array
3. Mark Shorts with the YouTube Short toggle when needed
4. Style fonts and colors to match your site
Default demo videos are public Creative Commons placeholders - replace them with your own IDs before publishing a client site.
An editorial video player for Framer portfolios and studios. Show a large stage with play overlay, then let visitors pick from a clean playlist rail - each item embeds YouTube on click (including Shorts).
Designed for motion reels, project walkthroughs, and film indexes that should feel like part of the site - not a default YouTube embed block.
What's included
Large stage with thumbnail, play affordance, and click-to-embed
Playlist rail with active/hover states
Up to 12 videos: label, type, YouTube video ID, Shorts flag
Auto / desktop / mobile layout modes + breakpoint control
Typography controls for meta, title, and playlist rows
Color controls for text and borders
Open on YouTube external link
Canvas-safe / reduced-motion aware behavior
How to use
1. Paste the code component into your Framer project
2. Add YouTube video IDs (not full URLs) in the Videos array
3. Mark Shorts with the YouTube Short toggle when needed
4. Style fonts and colors to match your site
Default demo videos are public Creative Commons placeholders - replace them with your own IDs before publishing a client site.
