https://github.com/khairul25556/picture-in-picture
This project enables a floating, resizable video player using the Picture-in-Picture API. Users can pop out a video into a small, always-on-top window while multitasking on other applications.
https://github.com/khairul25556/picture-in-picture
css html javascript picture-in-picture web-development
Last synced: 4 months ago
JSON representation
This project enables a floating, resizable video player using the Picture-in-Picture API. Users can pop out a video into a small, always-on-top window while multitasking on other applications.
- Host: GitHub
- URL: https://github.com/khairul25556/picture-in-picture
- Owner: Khairul25556
- Created: 2025-03-28T05:38:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-30T18:31:18.000Z (7 months ago)
- Last Synced: 2025-06-09T13:57:09.282Z (5 months ago)
- Topics: css, html, javascript, picture-in-picture, web-development
- Language: JavaScript
- Homepage: https://khairul25556.github.io/picture-in-picture/
- Size: 288 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Picture-in-Picture Project
A simple **Picture-in-Picture** project that allows users to pop out a selected video into a floating, resizable window using the **Picture-in-Picture API**.
## 🚀 Features
- Enables floating video playback
- Works with any video source
- User-friendly and minimal UI
- Built using **HTML, CSS, and JavaScript**
## 🎥 Demo
## 🛠️ Technologies Used
- HTML
- CSS
- JavaScript
- Picture-in-Picture API
## 📸 How It Works
1. Select a video source.
2. Click the **Enable Picture-in-Picture** button.
3. The video will pop out into a floating, always-on-top window.
4. Control playback within the floating window.
## 🖥️ Setup & Usage
1. Clone the repository:
```sh
git clone https://github.com/Khairul25556/picture-in-picture.git
```
2. Open `index.html` in a browser.
3. Click the button to enable Picture-in-Picture mode.
## 🌟 Contributing
Pull requests are welcome! If you find an issue, feel free to open an issue or submit a PR.