https://github.com/mah-shamim/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".
https://github.com/mah-shamim/custom-html5-video-player
Last synced: about 1 month ago
JSON representation
This repository contains the codebase for the Freecodecamp article "How to Build a Custom HTML5 Video Player Using TailwindCSS and JavaScript".
- Host: GitHub
- URL: https://github.com/mah-shamim/custom-html5-video-player
- Owner: mah-shamim
- License: mit
- Created: 2024-02-18T22:30:01.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-17T19:01:43.000Z (10 months ago)
- Last Synced: 2025-03-16T20:04:20.366Z (about 2 months ago)
- Language: JavaScript
- Size: 21.4 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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:
```bash
yarn
```
Start up the development server:
```bash
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](https://custom-html5-video-player5.netlify.app/)
