A modern, responsive web application that displays YouTube videos in a grid layout with search functionality. Built with vanilla JavaScript and modern CSS.
- 🎥 Video Grid Display: Responsive grid layout showing YouTube videos
- 🔍 Real-time Search: Filter videos by title or channel name instantly
- 🖼️ Thumbnail Preview: High-quality video thumbnails
- 📱 Responsive Design: Works seamlessly on both desktop and mobile devices
- ⚡ Fast Performance: Client-side filtering for instant results
- 🎯 Click to Watch: Direct link to YouTube video playback
- HTML5
- CSS3 (with CSS Grid and CSS Variables)
- Vanilla JavaScript (ES6+)
- YouTube Data API
- A modern web browser
- Internet connection to access the YouTube API
- Clone the repository:
git clone https://github.com/utkarshya24/ytvideos.git- Navigate to the project directory:
cd YTVideos- Open
index.htmlin your web browser or use a local server:
- Open the application in your web browser
- Videos will load automatically
- Use the search bar to filter videos by title or channel name
- Click on any video card to open it in YouTube
The application uses the FreeAPI YouTube endpoint:
GET https://api.freeapi.app/api/v1/public/youtube/videos
The application is deployed at: Live Demo
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- FreeAPI for providing the YouTube video data
- YouTube for video content and thumbnails