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.

---

📚 Table of Contents

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

---

🔎 Overview

📸 Screenshot

🔗 Links

• 🔴 Live Demo
• 🗂️ GitHub Repository

📌 Features

• ✅ 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

🛠️ Built with

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

---

🧠 My Process

🗃️ Useful resources

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

🔙 Previous Project

• Infinity Scroll | Project 2/20 → View Repository

🔜 Next Project

• Joke Teller | Project 4/20 → View Repository

---

👤 Author

🌐 Connect with Me

• Instagram
• YouTube

💻 Coding Profiles

• freeCodeCamp
• FrontendMentor
• GitHub

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