Introduction
A picture in picture (PIP) app is is an application or feature that allows a video or media content to play in a small floating window while the user performs other tasks on the same browser.
Picture in picture lets the video continue playing in a miniature window that stays on top of other apps or browser tabs, instead of watching a video only in full-screen mode. This enables multitasking and improves user convenience. The way Picture-in-Picture operates is by putting a video player in a tiny overlay window that stays visible while users work with other programs. For instance, someone may watch a livestream while exploring websites, join a video call while reviewing documents, or watch a training video while coding. Depending on the device or operating system, the floating window can typically be enlarged and moved to different corners of the screen.
Picture in picture feature is frequently utilized in online meetings, video streaming, and educational platforms in contemporary web development and mobile operating systems. This feature allows users to continue watching or participating in calls while using other apps, which is essential for popular apps like YouTube, Netflix, Zoom, and Google Meet. Because users do not have to interrupt media when switching tasks, the notion increases user engagement.
From a technical perspective, Picture-in-Picture functionality is implemented through system features or browser APIs. On websites, developers can use the Picture-in-Picture Web API, which allows a video element on a webpage to appear in a floating window above other windows. This implies that people can engage with other content on their device while continuing to watch media. Many modern platforms, including Android, iOS, and major web browsers support PiP. It is coded in HTMl, CSS and JS and also made responsive.
How picture in picture works?
The Picture-in-Picture (PiP) functionality in this project uses a floating video window to display the user’s screen. The procedure involves the browser interacting with a webpage’s video element and JavaScript managing the feature’s behavior. Initially, the program requests authorization from the user to record the screen. The Screen Capture API is an integrated feature of modern browsers that, upon user approval, enables websites to access the screen, a browser tab, or a particular application window.
The browser starts streaming the chosen screen content as soon as authorization is received. The captured screen stream is then connected to a video element on the webpage. This video element behaves like a live display of the screen, meaning whatever happens on the user’s screen is instantly mirrored inside the video player on the pag
The workflow typically includes:
- A video element embedded on the web page
- A user interaction, such as clicking a button
- A JavaScript request that moves the video into PiP mode
- The browser is creating a floating video window
After the activation, the user can:
- Resize the floating window
- Move it to another corner
- Return the video to the webpage
Building the project
This picture in picture project is coded in the core technologies of the web. HTM, CSS, and JavaScript. Each technology plays a specific role in making the application functional and structured. HTML is used for making the layout of the project and adding text. It defines the overall structure of the webpage. It is also responsible for displaying the captured screen as well. CSS is responsible for the styling and visual presentation of the project. It controls how elements appear on screen, including layout alignment, spacing, colors, and responsiveness.
Google fonts are used for enhancing typography and making the interface more modern. The functionality of the project is handled by JavaScript. JavaScript allows the webpage to interact with the browser and perform dynamic actions. In this project, JavaScript captures the user’s screen and displays it inside a video element on the webpage. The captured screen behaves like a live mirror of the actual display, meaning anything happening on the screen will be reflected in the capture area.
What we do on the screen will replicate in the capture area. We are applying the DRY (Don’t Repeat Yourself) principle by using functions and making our code simple and clear. It combines browser APIs with core web technologies to create a practical multitasking feature. The project works correctly without error. It is an intermediate-level project. Download the project and get experienced by yourself.
How to use this project?
- Download the project.
- Extract the zip file & get the folder.
- Set up an editor or IDE. (vs code, sublime, atom)
- Open the project folder in the editor.
- Launch the project in the browser. (chrome, firefox)
- Use the project.
- Enjoy & Share.
Now that you understand how the Picture in Picture project works, the next step is to experience it yourself. Reading about web development concepts is useful, but real learning happens when you explore and experiment with actual projects.
Download the project files, open them in your code editor, and run the application in your browser.