Design a video player frontend like YouTube
PremiumFrontend systemMedium
- Adaptive bitrate
- HLS
- DASH
Quick answer
This frontend system interview question asks you to design a video player frontend like YouTube. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the video player frontend for a watch page like YouTube. It plays videos up to 3 hours long with adaptive quality, and the hard part is starting fast and avoiding stalls on a 4G connection while custom controls, captions and shortcuts stay smooth and accessible.
Controls include play, seek with thumbnail preview, volume, speed, quality, captions, fullscreen and picture-in-picture. The player supports keyboard shortcuts and remembers where the user stopped.
What must a video player frontend like YouTube do?
- Adaptive quality: Pick a rendition from measured bandwidth and the player size; allow a manual override.
- Playback: Play, pause, seek by scrubbing or arrow keys (5 s), speed 0.25x to 2x, volume with mute, fullscreen and picture-in-picture.
How well must it do it?
- Startup: First frame within 1 s on a 10 Mbps connection and within 2.5 s on 4G.
- Stalls: Fewer than 1 rebuffer per 10 minutes at a stable 3 Mbps.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Adaptive bitrate
- HLS
- DASH
- Media source extensions
- Buffering strategy
- WebVTT
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a video player frontend like YouTube and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team