How To Create The YouTube Video Player

[@mcny40]

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.

[@keremardicli4013]

Omg..same here. I told myself that I would skip css part but i watch all of it. The elegant yet simple solutions amazes me all the time. There is only a couple of things that i did not know in this video and they can be found on the net easily, yet I would not think that I can do this at all. After seeing this, I can say that it is fairly doable.

[@Nexjsdeveloper]

Ok

[@stefanoesu426]

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

[@ismailarame3756]

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

[@Crashman1012]

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.

[@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?

[@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.

[@DinoDiscoveryShorts]

do you still have the react js version of this?

[@r.h.u.k.a]

@@DinoDiscoveryShorts I do but it's private man hahahah I can also create an open one

[@vagglord3156]

I'm curious to see the code if possible! If your GitHub is public, mind sharing your username?

[@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.

[@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 😉

[@senseicodes]

Can you link your source below😂😂😂 thanks .

[@Stoney_Eagle]

@@senseicodes hehe months of work to make it good, it's part of my software not open source sorry. I have twitch vods where I show it tho. 😉

[@spieker131]

Sheesh, that sound like a hell of a task to code.

[@Stoney_Eagle]

@@spieker131 There's quite a bunch of work yeah. There's a video encoder and server that is part of it on the backend. It's all tied together with an API server that links your server and the ones you have access to from your friends and family to the player. And it all comes together as a selfhosted "Netflix" and I've been using it to play my dvds and blurays. No tracking and 100% privacy 😊

[@senseicodes]

@@Stoney_Eagle oh I get it now. Private project. Nice.

[@walterwhite621]

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

[@TERN666]

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

[@leonardopillay4200]

Its guys like you that pioneer the startup community. Awesome work

[@allanregista4422]

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

[@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.

[@vinayakgandhi5690]

Can you please help me understand, how we disabled the "save video as...: option from right click and also removed the download option from bottom right?

[@passsacaglia]

super cool! my dream project is to do an e course like podia or teachable - would u be able to show this??

[@vinodvyavhare2851]

hey how can we change the quality of video??

[@top.of.reddit]

​​@@vinodvyavhare2851You would need to make a UI for it, and change the src of the video element to another video with different resolution

[@kjul.]

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

[@nickondrako]

These build videos have been baller. Great work Kyle.

[@AmanSingh-px5if]

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!

[@sciencegeeks1370]

Really needed this to finish my decentralized KZbin Thanks

[@developerpranav]

Damn! Made it to the end. I always thought that browser functionality other than the basic image and CSS is very hard to deal with. Seems not anymore. Thanks for the great tutorial, I'd want to try to do this in react using React's useRef. Also learnt about specificity at the document level vs at the element level. Thanks again!

[@Parken26]

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 🙋🏻‍♂️

[@JacobDuenke]

This was one of the most fun tutorials I’ve seen in years. Thanks for the video, Kyle!

[@rishabsharma5307]

Love this kind of videos. keep up the good work

[@davoudarsalani1888]

This is one of the most useful and to-the-point tutorials I've seen. Thanks Kyle!

[@michy7]

You know what bro you really be coming in clutch good looks

[@Jai-xq5hi]

Amazing knowledge and great teacher. Very well understanding concept. Thank you for this video

[@Nikhilsingh-pp7cf]

Great work man, was in real need of my own player to integrate in my website.

[@ShawnRitch]

This is a great video for learning and dealing with functions & functional programming. I think we can all agree and thank you for creating and making this understandable. I have been a web developer for over eight years and never seen such a great example - especially for free. Well done sir!

[@layeekromah4799]

Kyle has gone next level :) Great video as always

[@QuadDrums]

I was just thinking about how to code that up. You're a legend

[@isabelphillips451]

This is again one of the best tutorial on this channel. 😍😍😍 ... Now I can build my own video player ... mhuaaaaaaaaa😘

[@djibrilm__-]

much respects 🙌🙌🙌 i have never finished your videos without getting something advance...

[@galaparadi]

I still doing my little project about custom HTML video player and i still kinda stuck. But then, i got notification about this video. Well, look like i got some nice reference for my little project. Thank you Kyle for making this.

[@Acuce7ibd468j]

Actually i recommend this channel for my students for Advanced and heavy Topics . I wish to learn more about Web Assembly too

[@wassupdoc7742]

Great video thank you VDS ♥

[@Tesseus2006]

Thank you for making this video. I am new to programing and would love to propose a video like this in react as a suggestion. I made a portfolio in react for data analysis and there are quite a few tutorial videos out there. But your work and cohesive explanation are always the best.

[@davidd.larred7238]

You are a genius my friend, thank you very much for your help, keep going, god bless you.

[@EzeJ99]

Dude, you are awesome! Keep it up, i really enjoy your videos. Greetings from Argentina

[@ArchIntelLTD]

I admit that you have done a great work here. God bless you

[@hassaneoutouaya]

Thank you so much for broadcasting such a golden content !

[@limeo.g]

Thank you for your hardwork to simplified a custom video player!

[@azzen_v]

Really nice video! It would be so cool if you would have implemented the video sections functionality as well :)

[@Raaaww]

I combine my preview files into a long image that I use as wallpaper in the preview window and then I move the wallpaper position depending on time. I also calculate the interval by video duration so a video that is 1 minute long get previews at a closer interval than a video that is an hour. Otherwise a video that is one minute would only have 6 previews and you would have to slide a 10th of the seek bar to see a new one.

[@WebDevSimplified]

That is an even better approach as it limits the download. KZbin does something similar but does it in chunks of around 50 previews per image.

[@laptopstuff8886]

Yep, im trying to implement that. Im stuck a but. When im scrubbing, it doesnt display the thumbnail as one big image like it is supposed to. Instead it displays the sprite sheet. Looks weird. Can you help me with that?

[@claeskarlsson6054]

@@laptopstuff8886 maybe you need overflow: hidden on preview window or your background image width might be set to 100% instead of auto?

[@ai_coding]

This is awesome! Thanks for the tutorial. Going to follow it using tailwind.

[@anweshandev]

Now continuing, excellent video. Keep it up man!!!

[@armancherkharov9410]

Gosh, exactly what I needed! Thanks a lot brother!

[@jamalkheirbeik]

Great work man 👏🏻👏🏻

[@Politirized]

Top quality as always. As content I suggest you doing a video on doing a tumblr's discovery page. So like placement of images in a page without changing the aspect ratio of those images.

[@DoubleDYouTube]

From an accessibility point of things, this is an amazing tutorial. Thanks!

[@chinmaykunkikar]

This is quality content💯 Keep it up man :)

[@berdinazarov6972]

super useful stuff you showed here, thanx a lot😍❤

[@alexcross3165]

Very professional! Thank you so much for this amazing video!

[@igdev6095]

Thanks for doing my recommend 🙊 Hope u make a video with canvas

[@spreadItWide]

For anyone trying to show/hide the player on cellphone fullscreens... I'm sure there is a better way of doing this.. or unless I missed something in this video . Here's a quick way: This will also work while out of fullscreen though so if you click in the container, it will still show/hide the controls, hover still works only if .hidden (Which is nice sometimes? lol idk) Add this to your CSS: .hidden { display: none; } Add this to your element variables: const videoControls = document.querySelector('.video-controls') Add this into your functions: videoContainer.addEventListener('click', e => { // Adds a class to the .video-controls element to show it videoControls.classList.toggle('active') if (e.target ) { checkIfActive() } }) function checkIfActive() { // if .video-controls also contains .active, remove .active and add .hidden to hide it if (videoControls.classList.contains('active')) { videoControls.classList.toggle('hidden') videoControls.classList.toggle('active') } } Please make this better if you can, I started to play around with screen.width in js with if statement, but this is good enough for me for now.

[@mprasanth18]

Today I was thinking like it would be cool to build a video player like KZbin. You read my mind.

[@marekzabak]

This one is really cool. I would like to see this extended with aria-labels, mediaSession API and ChromeCast API, to be really complete player.

[@sarthakchauhan1637]

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

[@NavyMan010]

I am doing this right now use useRefs for the event listeners Like this example below This is not all of the code but should give some insight VANILLA JA const playPauseBtn = document.querySelector(".play-pause-btn") // Play/Pause playPauseBtn.addEventListener("click", togglePlay) video.addEventListener("click", togglePlay) function togglePlay() { video.paused ? video.play() : video.pause() } video.addEventListener("play", () => { videoContainer.classList.remove("paused") }) video.addEventListener("pause", () => { videoContainer.classList.add("paused") }) My REACT VERSION const vidRef = useRef(null); const vid = vidRef.current; const vidContainerRef = useRef(null); const vidContain = vidContainerRef.current; // Play / Pause const togglePlay = () => { vidRef.current.paused ? vidRef.current.play() : vidRef.current.pause(); }; const videoPause = () => { console.log("Paused"); vidContainerRef.current.classList.add("paused"); }; const videoPlay = () => { console.log("Playing"); vidContainerRef.current.classList.remove("paused"); }; return... Good Luck

[@Coolantopa]

Tnx kyle, a well needed one, u r z best

[@Anonymous-rg1dd]

this kind of tutorial is really helpful

[@alekseykosenko669]

Hi, bro. Some styles for your slider: input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=range]::-webkit-slider-runnable-track { border-radius: 10px; height: 3px; background-color: #fff; } input[type=range]::-webkit-slider-thumb { background: #fff; border-radius: 10px; cursor: pointer; width: 12px; height: 12px; margin-top: -4px; margin-right: 5px; -webkit-appearance: none; } input[type=range]::-moz-range-track { border-radius: 10px; height: 3px; background-color: #fff; } input[type=range]::-moz-range-thumb { background: #fff; border-radius: 10px; cursor: pointer; width: 12px; height: 12px; margin-top: -4px; margin-right: 5px; }

[@edutyl9372]

Absolute genius! thanks for this

[@arnoldRiungu]

how do i make it using react

[@tuku_mann]

wow, that's an absolutely incredible tutorial

[@nativeKar]

This video is a gem.

[@andradegilmar]

This tutorial is awesome!

[@Barahten2010]

Hello could you add to your video and show how it would be possible to implement a timeline in timecode segments?

[@kwasiezor1630]

Amazing tutorial 🎉

[@vernevens1598]

I'm trying to make my own media server front end for a server I built from an old desktop computer that I loaded with Ubuntu server. I just started learning web development in Sept 2023. Thanks for your video.

[@SirChogyal]

Very interesting. Now we can design anything!

[@facts36936]

This is a great video for learning operation with video player. Thank you for making this video. Could you please tell me how to add chapters like youtube in custom player?

[@rubenpoppe]

You can add css accent-color to change the color of the slider (and other browser inputs).

[@edutyl9372]

Thanks for the tip

[@AutisticThinker]

49:00 - Cough, magic numbers? 😁

[@LzysGraphics]

If you wanted to keep the same method for detecting what the fullscreen and picture-in-picture button should do when clicked, you can also see if the video is in picture-in-picture by calling document.pictureInPictureElement, just as you did for the fullscreen element.

[@TheSoftEng]

[@WebDevSimplified]

Thank you so much for the support!

[@igdev6095]

Hope u make these with scss instead css for tasks quicker

[@deansmith8624]

I hope I don't sound too ignorant (unaware) here but if I could get you to let me know where to download the KZbin Video Player you are using in this video I would appreciate it. I spent the last hour looking but to no avail, Sorry. Thanks.

[@rlopez6636]

This makes me think differently. .thank man

[@bishwajeetpandey1570]

Wow men thx , i learnt alot from this tutorial

[@mohammedtahabmt3256]

Great video bro, Please make another for audio player like soundcloud

[@Dxphantomgxc-fm6gt]

@WebDevSimplified please is it possible for me to create a video player in html that actually plays all video in my site without a need for me create a html file for all the videos, So if i click any video it automatically plays using this customized video player and if i should click next it actually goes to the next video, eg: S01E13 when I click next S01E14 instead of random videos.. Thanks alot

[@esteban_9049]

Perhaps I'm late but, you can do that either with JS or a framework like Django, Django being easier. The JS approach can be done with a function(url,metadata){ theHTML = ` ${metadata} ` }

[@yasirhantoush]

This is amazing, wow. perfect

[@JtagSheep]

For google chrome in recent versions autoplay will only work if the video player is muted to start with, chrome tries to prevent browser tabs from playing unwated audio unless the user has interacted with the window.

[@uchoatran1917]

Great video. 😍

[@jamshediqbal7936]

Hi Kyle, I need it this coming week and your video came out right in time. How can you read my mind? I need it in React project but it will surely help me to create a video player component. Thank you so much, Kyle.

[@CreativeTutorialsWeb]

Very interesting great work

[@jampy42]

Is there any library or way to add chapters too? like youtube that you can add chapters and go to that specific part

[@geforcesong]

great tutorial

[@mannixmd]

You can change the color of the volume slider with accent-color property just FYI

[@be2wa]

Another cool video, sir! If I could throw my two tiny cents though I would say the serif font within the controls kinda hurts the eyes.

[@codlover1468]

Awesome video

[@TMercury480]

Hey, I have a problem where the "loadeddata" video event doesn't trigger itself on load 1/4 of the time but the video is loaded and playable (tried on both Firefox & Chrome). Any advice?

[@ventsislavstoimenov4404]

Man, you are extremely skilled 👏👌1️⃣0️⃣

[@david.kizivat]

Material for part 2: go to some long video (I think is > 2h) and while scrubbing move the cursor up - it zooms in the timeline for finer movement.

[@csspdnet3399]

Hello, Can you please have a short video about fullscreen video with overlay, it can not be done with html video tag. Thank you.

[@alibadra5367]

Awsome , can you do famous app cloning with react like cloning twitter of netflix or something like this

[@thescientisthorse]

Pretty awesome. The pictureinpicture functionality is not currently supported in Firefox.

[@oskarkottom8365]

Where is the video quality? Otherwise great video love your content

[@fiifiyawson8397]

it crazy how i was just thinking of this today

[@TheScriptingLegend]

Kyle: it has everything you can think of. Me: Changing resolution? Answer ofc not

[@aryankumar87771]

please teach how to downgrade the quality and pull different video qualities from a node server ( 144p, 240p, 360p, 720p, 1080p and so on ) ?

[@charanpapolu007]

Hi, i need a video player with segments highlighted on the seek bar , so that i can jump to segment to segment easily using reactjs

[@yongcao2780]

This is amazing!

[@1kilo368]

Why doesn't my element display the video on the screen on liveserver even though when I check the link it takes me to the actual video and plays it.