Learn the Skills Netflix, Meta, and Capital One Actually Hire For
Free courses from frontend to fullstack and AI
Overview
Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Learn how to clone YouTube's advanced video player in this comprehensive tutorial. Dive into creating a feature-rich video player from scratch, covering everything from basic functionalities like play/pause and fullscreen mode to more complex features such as picture-in-picture and timeline scrubbing. Follow along as the instructor guides you through HTML, CSS, and JavaScript implementation for each component, including volume controls, closed captions, playback speed adjustment, and an interactive timeline. By the end of this 1 hour and 23-minute session, you'll have gained practical skills to build a professional-grade video player resembling YouTube's interface.
Syllabus
- Introduction
- Setup/Demo
- Video player HTML/CSS
- Play/pause HTML/CSS
- Play/pause JavaScript
- Video controls HTML/CSS
- Fullscreen, theater, and mini player HTML/CSS
- Fullscreen, theater, and mini player JavaScript
- Volume controls HTML/CSS
- Volume controls JavaScript
- Duration HTML/CSS
- Duration JavaScript
- Closed captions HTML/CSS
- Closed captions JavaScript
- Playback speed HTML/CSS
- Playback speed JavaScript
- Timeline HTML/CSS
- Timeline JavaScript
Taught by
Web Dev Simplified