custom-video-player Tailwind Templates

Custom Video Player

Custom video player with React, Typescript and Tailwind

Custom YouTube-like Video Player

This project aims to recreate the functionality and aesthetics of YouTube's video player using Bun, React, TypeScript, and Tailwind CSS.

āš ļø This code was created with the purpose of recreating the player and not to make it ready for production. That being said, this code will obviously be subject to evolution to make room for optimization and testing, with the aim of turning it into a package usable by everyone. āš ļø

Features

  • Customizable player controls
  • Responsive design
  • Playback options (play, pause, seek)
  • Volume control
  • Fullscreen mode
  • Getting Started

  1. Clone this repository to your local machine.
  2. Navigate to the project directory in your terminal.
  3. Install dependencies by running bun install.
  4. Clone the .env.example to a .env file and update the VITE_VIDEO_URL to the URL to what you want to play.
  5. Start the development server using bun run dev.
  6. Open your browser and visit http://localhost:5173 to view the app.

Usage

  • Upon running the app, you will see the custom video player interface.
  • Click the play/pause button to start or pause the video.
  • Drag the progress bar to seek to a specific time in the video.
  • Adjust the volume using the volume slider.
  • Click the fullscreen button to enter fullscreen mode.

Contributing

šŸ™ Contributions are welcome! Please fork the repository, make your changes, and submit a pull request. For major changes, please open an issue first to discuss the proposed changes. šŸ™

License

This project is licensed under the MIT License.

Top categories

Loading Svelte Themes