Picture in Picture | ZTM JS Web Projects Course

Project 3/20

A minimalist Picture-in-Picture (PiP) web app that allows users to share their screen and pop it out into a floating video window using the browser's native Picture-in-Picture API. Clean design, one-click interaction, and a focused learning experience on media APIs.

• 🔎 Overview
  • 📸 Screenshot
  • 🔗 Links
  • 📌 Features
  • 🛠️ Built with
• 🧠 My process
  • 🗃️ Useful resources
  • 🔙 Previous Project
  • 🔜 Next Project
• 👤 Author
  • 🌐 Connect with Me
  • 💻 Coding Profiles

Live Preview Screenshot

• 🔴 Live Demo
• 🗂️ GitHub Repository

• ✅ Prompts the user to select a screen to share
• ✅ Streams the selected screen into a hidden video element
• ✅ Allows starting Picture-in-Picture with a single click

• HTML5
• CSS3
• Vanilla JavaScript
• Picture-in-Picture Web API
• MediaDevices API (getDisplayMedia())

• Google Fonts
• CSS Tricks - Picture-in-Picture Guide
• MDN - Screen Capture API
• TC39

• Infinity Scroll | Project 2/20 → View Repository

• Joke Teller | Project 4/20 → View Repository

• Instagram
• YouTube

• freeCodeCamp
• FrontendMentor
• GitHub

🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀