A modern web-based video player that allows users to search and play videos dynamically using the Pexels API. This project demonstrates real-world API integration, dynamic UI updates, and media handling using HTML, CSS, and JavaScript.
- 🔍 Search videos using Pexels API
- 🎥 Click thumbnail to play video instantly
- ⚡ Dynamic video loading
- 🎨 Clean and responsive UI
- 📸 Thumbnail previews for easy selection
- 🔗 Proper attribution to Pexels and creators
- HTML5
- CSS3
- JavaScript (Vanilla JS)
- Pexels API
video-player-api/
│
├── index.html
├── style.css
├── script.js
├── README.md
├── LICENSE
│
└── assets/
└── (optional: local media files)
- Clone the repository:
git clone https://github.com/your-username/video-player-api.git
- Open the project folder:
cd video-player-api
- Add your Pexels API key in
script.js:
const API_KEY = "YOUR_API_KEY_HERE";- Run the project:
- Open
index.htmlusing Live Server (recommended)
- Pexels API → https://www.pexels.com/api/ Used to fetch free stock videos dynamically
Photos and videos are provided by Pexels. This project follows Pexels API guidelines:
- A visible credit link to Pexels is included
- Creators are credited wherever possible
- The app does not replicate core Pexels functionality
Example credit:
Photos & Videos provided by Pexels
I built this project to practice real-world API integration and improve my frontend development skills.
Most beginner projects are static, so I wanted to create something dynamic where users can interact with live data. This helped me understand:
- How APIs work in real applications
- Handling asynchronous JavaScript (fetch, promises)
- Updating UI dynamically based on user input
- Managing video playback programmatically
This project reflects my ability to build practical and interactive web applications.
Made by harshskarki
This project is licensed under the MIT License.
Note: Media content (photos/videos) belongs to their respective creators on Pexels and is used according to their API guidelines.