Custom HTML5 Video Player

This repository contains the codebase for the Freecodecamp article "How to Build a Custom HTML5 Video Player Using TailwindCSS and JavaScript".

Project Setup

This project was setup using the Vite JavaScript template

Install project dependencies:

yarn

Start up the development server:

yarn dev

Folder & File Structure

• public/ : This folder contains the assets for the project including favicons and also the video used for the video player

• index.html : This file contains the markup for the custom HTML5 video player, including the Tailwind CSS added to the markup to style the custom HTML5 video player

• style.css : This file contains the Tailwind CSS directives and the piece of code is used to customize the appearance and behavior of the default media controls provided by the WebKit browser engine (commonly used in browsers like Safari and some versions of Google Chrome) for the video element

• tailwind.config.js : This file contains the custom configuration for Tailwind CSS

• postcss.config.js : This is also the configuration file for PostCSS to make Tailwind CSS work effectively.

• main.js: This file houses all the JavaScript code responsible for implementing the custom features and functionality on the video player UI.

Project Link

You can access the live site by clicking on the following link

What more can you do?

If you love this project and the article and you find it helpful, it will be okay to give this project a star on Github. and also share with friends -- I'd really appreciate it!

⚖️ Licence

MIT (c) Franklin Okolie.