How to Code a Custom HTML5 Video Player

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

This video is part of my Let's Build: With JavaScript series. Be sure to check out the playlist on my channel or my blog for all of the videos so far!

Welcome to the next installment to my Let's Build: With JavaScript series. This tutorial teaches you how to create, customize, and manipulate an HTML5 video player using vanilla JavaScript.

I'll be using a combination of HTML, CSS, and JavaScript to accomplish this task which is a bit more advanced than the previous installments in this series.

I got the initial idea for manipulating an HTML5 Video element from Wes Bos who did a very similar video tutorial in is JavaScript 30 course. I highly recommend giving his course a go as it teaches you modern tips and tricks for JavaScript workflow.

Much of the credit for the concept and code structure goes to Wes on this one. I wanted to take a stab at doing something similar with my own flair. I used different styles, naming conventions, and more to accomplish what you see on the final CodePen (linked on the blog post below).

====================

💻 Previously published at: https://web-crunch.com/lets-build-with-javascript-html5-video-player

💻 Check out the blog: https://web-crunch.com

🔭 Check out my app: https://affinicasts.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ 🙏🏻 Patreon https://www.patreon.com/webcrunch

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=wiwCusqjqZ4