A fully functional, dynamic YouTube Clone built with HTML, CSS, and JavaScript. This project replicates the core features of the YouTube platform, including real-time video fetching, intelligent search suggestions, and a fully responsive user interface.
View Live Project : https://devpatel-youtube.vercel.app/
- Dynamic Video Feed: Integrates with an external API to fetch and display real-time video thumbnails, titles, and channel metadata.
- Search with Auto-Complete: An intelligent search bar that provides real-time suggestions as you type, improving user navigation.
- Embedded Video Playback: Seamless video streaming using iframes with full playback controls.
- Smart Recommendations: A contextual sidebar that displays related videos based on the content currently being viewed.
- Fully Responsive Design: Optimized for all screen sizes (Desktop, Tablet, and Mobile) using CSS Flexbox and media queries.
- Interactive UI: Features custom loading animations for a smooth user experience while data is being fetched.
- Frontend: HTML, CSS, JavaScript
- Data Source: RapidAPI
- Deployment: Vercel
- Home Page
- Searching
- Opening a Video
To run this project locally, follow these steps:
- Clone the repository : git clone https://github.com/Dev1822/Youtube.git
- Navigate to the project directory : cd Youtube
- Open index.html: You can simply open the index.html file in your browser or use a "Live Server" extension in VS Code.
Building this project helped me master:
- Asynchronous JavaScript: Handling multiple API calls and managing data flow.
- DOM Manipulation: Dynamically updating the UI without page reloads.
- Advanced CSS: Implementing a complex, responsive grid system and sticky navigation.
Developed by Dev Patel