How To Create The YouTube Video Player

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:

🌎 Find Me Here:

⏱️ 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

[mcny]

I’m really impressed by how you always deliver this quality content. When I first saw the video length, I said to myself « certainly interesting but way too long ». I intended to only watch bits of it but ended up watching it entirely. What a great teacher you are! Perfectly paced tutorial.

[stefanoesu]

as a 34yold programmer, working in this web developing environment since 15 years, i have to say: you are a talent, a real one! good job and thx for the videos, they are inspiring and very useful

[ismailarame]

really cool man, you are a legend this tutorial will help me alot in my next project you are a saver thank you from the deep of my heart really appreciated work love your tutorials so much

[Stoney_Eagle]

Where were you when I needed this 😂, finally a good rock solid custom video player tutorial! 👌
I've made a Netflix video player including all it's crazy features, multi-audio multi-sub multi-quality resume playback, double tap left and right for seeking and I have my preview thumbnails in a sprite for efficiency 😉

[dennishofke]

Awesome video, but the topic I was interested in the most wasnt covered: sending the video in small pieces from backend to frontend (streaming). Could you cover that in a next video please?

[itspawanpoudel]

This is the video which i was searching for more than 10 days
And today youtube suggest this to me .
Thank you youtube suggestion algorithm

[Crashman]

As a junior dev, I love watching you make mistakes and play them off. I always do this on slack with my teammates😂 great job Kyle, thanks as always!

[senseicodes]

God tier level tutorial. Nice work Kyle.

[piyushjhaGeek]

I just made a custom video player last month, a bit different than this. The only thing I had issues was with implementing custom buffering animation. Proper events (waiting, stalked or pause) are not triggered during buffering as mentioned in MDN docs. Sometimes they do, sometimes they don't. And at the end after running out of ideas I had to check if the video is progressing after every second (unless the user has paused). It would be nice if you can make a video on that, thanks. And thanks for this video as well, our approach and coding styles are almost same haha.

[r.h.u.k.a]

Okay, I came into this after years following your channel and brother... I cannot describe how happy I am that you made this. Thank you so much for the help, I made a React version of this and it's looking amazing.

[nedmerrill]

Such a wealth of knowledge for any beginner developer here. I mean just overall how neat and thought through your code is, so pleasant to watch. Thank you brother.

[Parken]

Brilliant! I have been looking and waiting for years, for soemone to do exactly what you have done now - thank you very very much for your efforts 🙋🏻‍♂️

[AmanSingh-pxif]

Implemented a custom player like this 6 months back in react, and used states, onHover, onFocus events. Which as the video shows could have been done with just CSS (silly me). I could have saved a lot of complexity :) Thanks kyle!

[kjul.]

Thanks for actually creating it from scratch and not using some frameworks or pre-built modules. Great job!

[walterwhite]

This tutorial is on another level. Like literally its off the scale.

[sarthakchauhan]

Amazing video! Could you please think about making the same youtube editor in React JS? Thanks

[TERN]

Just an inch away from 1 million subs. You definitely deserve it. Wish you the best, man.

[allanregista]

You are The Real Deal Bro, many of ur contents are rare and exotics. Respect 🙏

[nickondrako]

These build videos have been baller. Great work Kyle.

[rishabsharma]

Love this kind of videos. keep up the good work