JavaScript Simplified Course: https://javascriptsimplified.com

YouTube has one of the best video players out there and in this video I will show you how to clone the entire video player. This includes everything from simple stuff like full screen and theater mode to complex features like picture in picture and timeline scrubbing.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/youtube-video-player-clone
JavaScript Simplified Course: https://javascriptsimplified.com


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Setup/Demo
00:03:09 - Video player HTML/CSS
00:06:29 - Play/pause HTML/CSS
00:14:31 - Play/pause JavaScript
00:20:20 - Video controls HTML/CSS
00:22:04 - Fullscreen, theater, and mini player HTML/CSS
00:26:42 - Fullscreen, theater, and mini player JavaScript
00:36:13 - Volume controls HTML/CSS
00:41:59 - Volume controls JavaScript
00:46:04 - Duration HTML/CSS
00:47:14 - Duration JavaScript
00:52:50 - Closed captions HTML/CSS
00:54:37 - Closed captions JavaScript
00:56:45 - Playback speed HTML/CSS
00:58:10 - Playback speed JavaScript
01:01:14 - Timeline HTML/CSS
01:11:04 - Timeline JavaScript


#VideoPlayer #WDS #JavaScript