133Design YouTube frontend: video playback, adaptive streaming, and feed virtualization
hardAbout 60 minutesSystem designvideostreamingmsevirtualizationsystem-design
Problem
Design the frontend of a YouTube-like platform:
- a home feed and search results with thousands of video cards (thumbnails, titles, view counts), loading as you scroll;
- a watch page where playback starts fast and keeps playing smoothly as network speed changes;
- player controls: play, seek, quality, captions, playback speed, picture-in-picture, keyboard shortcuts;
- hover previews in the feed, recommendations next to the player, and resuming where you left off.
Focus on adaptive streaming in the browser, startup performance, the feed's rendering and data loading, and measuring quality of experience.
Step-by-step
The feed (a long, image-heavy, infinitely scrolling list) and the watch page (a media pipeline plus metadata). They have different performance problems, so design them separately and share the data layer.
Unlock the full solution
What's inside
- Step-by-step
- Requirements
- Architecture
- Data model and state
- Key flows and trade-offs
- Performance and reliability
- Follow-up questions
Includes 2 code listings, 5 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.