A YouTube video player clone with nearly all main functionalities and cross-device responsiveness designed to closely resemble YouTube's interface with vanilla JS using no libraries whatsoever.
✅ A working playlist that allows you to play videos included in the list seamlessly
✅ Fully responsive video player with nearly all main functionalities like captions, playback speed, double tap to seek/rewind, fullscreen mode (doesn't work on iPhone unfortunately), mini-player mode, theater mode etc.
✅ User-friendly interface closely resembling YouTube's design
✅ Partially multi-lingual (English and Arabic)
With a mixture of Youtube data API to fetch the Arabic title, thumbnail, video id, video owner channel id, picture and title, video views count and publish date; a videos JSON file to fetch the video source which is stored locally in the assets/videos file, the video subtitles source which is stored locally too and the video title in English.
According to the current location in the webpage the correct video info and data is shown and according to the device's language either Arabic or English is shown.
- Adding local storage to persist things like playback speed
- The ability of adjusting the background color, text color, font etc. of the captions.
- Light/dark mode
- Ability of changing the language manually
I want it to be a more bigger project, I want it to be a fully-functional Youtube-like platform that respects the Shariah-law, I see tremendous potential in that and what I made according to me is a promising start.
You can try it out by visiting the live demo.
If you find any issues with the YouTube video player or would like to suggest enhancements, please open an issue on the issue tracker
If you'd like to contribute code to the project, please follow these steps:
- Fork the repository
- Create a new branch for your feature or bug fix
- Make your changes and commit them
- Push your changes to your forked repository
- Open a pull request to merge your changes into the main repository.
Feel free to explore the demo and contribute to this project if you have any suggestions or would like to improve it.