Picture-in-Picture Mode: Web, iOS, Android Guide 2026

Updated October 2026: Firefox 153 shipped the standard Picture-in-Picture API (July 2026), Chrome 142 auto-PiP for media apps, the Android 15 PiP UI-state callback and the Jetpack core-pip library.

Why Fora Soft wrote this playbook

Fora Soft has built video and real-time products since 2005 — 250+ projects across telehealth, live streaming, video conferencing, OTT, education and surveillance, with 50 in-house engineers and a Top Rated Plus record on Upwork. We have shipped Picture-in-Picture on all four surfaces this guide covers, so we have also hit the failure modes: iOS review rejections, Android OEM quirks, Safari gaps, and the WebRTC-in-PiP dance that no vendor documents end to end.

This is what we tell clients in week one of a PiP-heavy build: which API to reach for on each platform, what it costs, where it breaks, and when to say no. For the iOS-only deep dive, read our companion piece, Picture-in-Picture on iOS: implementation and peculiarities. For the product context, see our video and audio streaming development work and the education platforms in our BrainCert case study.

What Picture-in-Picture mode is in 2026

Picture-in-Picture (PiP) mode lets a video detach from its host tab or app and keep playing in a small, always-on-top floating window while the user does something else; “PiP” and “PiP mode” mean the same thing. It first shipped on iPad (iOS 9, 2015), then Safari for macOS (2016), Android TV (7.0, 2016) and Android phones (8.0, 2017), and as of October 2026 it runs on every major consumer platform, including all four major desktop browsers. The details differ per surface, so the first job is knowing exactly what each one supports.

How users turn it on. On Android, start a video and press Home or swipe up; if it does not float, allow it under Settings → Apps → Special app access → Picture-in-picture (the exact path varies by phone maker). On iPhone and iPad it is on by default under Settings → General → Picture in Picture. In Chrome, Edge, Safari and Firefox, use the PiP button in the video controls. Whether an app supports PiP is the app’s choice: YouTube, for example, widened free PiP on iPhone beyond the US in April 2026 for long-form, non-music videos, while music PiP stays a Premium feature (MacTrast, April 2026).

Figure 1. Classic video-element PiP now runs in every major desktop browser (Firefox joined with version 153 in July 2026); Document PiP is Chromium plus Firefox 151+, and not Safari.

Web PiP: the video element in 10 lines

For a standard HTML5 video, PiP is a one-method call on the element. This is the baseline every OTT product should ship. Feature-detect first, then toggle:

const video = document.getElementById('player');

if (document.pictureInPictureEnabled && !video.disablePictureInPicture) {
  pipBtn.addEventListener('click', async () => {
    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else {
        await video.requestPictureInPicture();
      }
    } catch (err) {
      console.warn('PiP failed:', err);
    }
  });

  video.addEventListener('enterpictureinpicture', () => {/* shrink main UI, track event */});
  video.addEventListener('leavepictureinpicture', () => {/* restore main UI */});
}

Two things to wire alongside it. First, navigator.mediaSession, so pause, seek and next show up in the PiP chrome and on OS media-control surfaces. Second, the disablePictureInPicture attribute on ad or DRM-forbidden frames where PiP must not be allowed. The :picture-in-picture CSS pseudo-class lets you restyle the player automatically as it enters and leaves the mode.

Auto-PiP on the web in 2026. Starting with Chrome 142, a media app that registers a Media Session enterpictureinpicture action handler can enter PiP automatically when the user switches tabs, and Chrome is testing browser-initiated auto-PiP for sites without a handler behind a flag (Chrome for Developers, March 2026). To keep the browser from floating your video, register your own handler and ignore calls where details.reason is "contentoccluded". Firefox 153 (July 2026) brought the same requestPictureInPicture() call to desktop Firefox (MDN release notes), so one code path now covers all four major desktop browsers.

Document PiP: float any DOM, not just video

Classic PiP floats a bare video element. The Document Picture-in-Picture API (stable in Chromium since Chrome 116, 2023) floats any DOM you hand it: the player, a chat sidebar, a whiteboard, controls, an overlay. That turns PiP from “watch while doing email” into a miniaturized instance of your app. Firefox 151 added support in May 2026; Safari still does not have it.

Figure 2. The two web PiP APIs: classic floats a single video; Document PiP floats an entire interactive window.

// Call from a click handler: requestWindow() needs a user gesture.
if ('documentPictureInPicture' in window) {
  const call = document.getElementById('live-call');
  const pipWindow = await documentPictureInPicture.requestWindow({ width: 320, height: 180 });

  // Copy stylesheets so the PiP window matches the host.
  [...document.styleSheets].forEach(sheet => {
    try {
      const css = [...sheet.cssRules].map(r => r.cssText).join('');
      const style = pipWindow.document.createElement('style');
      style.textContent = css;
      pipWindow.document.head.appendChild(style);
    } catch { /* cross-origin sheet, skip */ }
  });

  // Move the live call UI into the PiP window, and put it back on close.
  pipWindow.document.body.append(call);
  pipWindow.addEventListener('pagehide', () => {
    document.body.append(call);   // keep the reference: the node now lives in the PiP document
  });
}

Where it earns its keep. Video meetings (gallery plus visible chat), live commerce (product panel next to the stream), collaborative editors (document plus a presence indicator) and coding tools (tests running beside the editor). Document PiP is the only way to keep a WebRTC grid interactive without leaving the tab. The window API also gives you resizeTo, focus handoff to the opener, a disallowReturnToOpener flag, and the display-mode: picture-in-picture media query, which matches inside the PiP window so the moved UI can switch to a compact layout. Chrome’s own Document PiP guide has the full option list and lifecycle details.

Android PiP: Activity mode and params

Android PiP is an Activity-level mode, available since Oreo (API 26). You declare support, expose an aspect ratio and optional remote actions, then call enterPictureInPictureMode(). Media3/ExoPlayer needs no special handling; auto-enter arrived in Android 12 (API 31).

<!-- AndroidManifest.xml -->
<activity android:name=".PlayerActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
    android:launchMode="singleTask" />

// PlayerActivity.kt
private fun pipParams(): PictureInPictureParams {
  val builder = PictureInPictureParams.Builder()
    .setAspectRatio(Rational(16, 9))
    .setActions(buildPipActions())
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    builder.setAutoEnterEnabled(player.isPlaying)   // Android 12+: system enters PiP on Home
  }
  return builder.build()
}

// Call from your player listener whenever playback starts or stops.
fun updatePip() = setPictureInPictureParams(pipParams())

override fun onUserLeaveHint() {   // Android 8–11 path
  super.onUserLeaveHint()
  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S &&
      packageManager.hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE) && player.isPlaying) {
    enterPictureInPictureMode(pipParams())
  }
}

Gotchas. Use singleTask (or equivalent task handling) so returning from PiP does not open a second player. Handle onPictureInPictureModeChanged to swap in a minimal UI. On some OEM skins (Xiaomi HyperOS/MIUI, Huawei EMUI) users must grant a per-app PiP permission, so surface a helper on first use and log when it is missing. The Android PiP docs cover the params in full; for battery and memory tuning that compounds with PiP, see our Android video-streaming optimization guide.

Newer Android APIs worth adopting. Keep setSourceRectHint updated with the player bounds so the enter animation starts from the video rather than a blank overlay; from Android 12 (API 31), auto-enter depends on it. Apps targeting Android 15 receive onPictureInPictureUiStateChanged with an isTransitioningToPip() state, so you can hide controls as the animation starts rather than after it. Google’s Jetpack androidx.core:core-pip library wraps all of this in VideoPlaybackPictureInPicture and BasicPictureInPicture templates with one event listener; it is still at 1.0.0-alpha02, so treat it as preview (Android Developers). For a step-by-step Kotlin walkthrough, see our Android picture-in-picture tutorial with code examples.

iOS PiP: controller, audio, review traps

iOS PiP is built on AVPictureInPictureController. Wiring it up is about 15 lines. Shipping it through App Review without surprises is the hard part.

// Info.plist: UIBackgroundModes = ["audio"]
// AVPlayer + AVPlayerLayer is the normal path. For a video call, use
// AVPictureInPictureVideoCallViewController (iOS 15+) or a sampled layer.

import AVKit

let playerLayer = AVPlayerLayer(player: player)
playerLayer.videoGravity = .resizeAspect
view.layer.addSublayer(playerLayer)

guard AVPictureInPictureController.isPictureInPictureSupported() else { return }
// Keep a strong reference (a property), or PiP never starts.
pipController = AVPictureInPictureController(playerLayer: playerLayer)
pipController?.delegate = self
pipController?.canStartPictureInPictureAutomaticallyFromInline = true

try AVAudioSession.sharedInstance().setCategory(.playback)
try AVAudioSession.sharedInstance().setActive(true)

The four traps we keep debugging. First, apps that declare the “audio” background mode but do not actually play audio in the background get rejected; the app must legitimately continue audio for the user. Second, returning from PiP means restoring the player into your view hierarchy, and forgetting to do so leaves a live-but-disconnected PiP window. Third, for WebRTC calls use AVPictureInPictureVideoCallViewController (iOS 15+); AVPlayerLayer cannot render an RTCVideoTrack. Fourth, on iPad, Slide Over and Stage Manager confuse first-time users, so document the behaviour. Apple’s AVKit reference and our iOS PiP deep dive go further.

PiP for WebRTC calls: the hard mode

The most common PiP request we get in 2026 is: put the active speaker of a meeting into PiP when the user switches tab or app. Every platform answers it differently.

Web. Either render the RTCVideoTrack into a <video> fed by a MediaStream and use classic PiP, or move the whole call UI into a Document PiP window. The second option is better for meetings because you keep controls and roster.

Android. Run the call UI in one Activity and flip to PiP with auto-enter; the WebRTC SurfaceViewRenderer renders inside PiP without extra work.

iOS. Use AVPictureInPictureVideoCallViewController (iOS 15+) with an AVSampleBufferDisplayLayer, create the PiP controller with AVPictureInPictureController.ContentSource(activeVideoCallSourceView:contentViewController:), and push CMSampleBuffers from the WebRTC track. Two call-specific traps: iOS pauses the local camera in PiP unless the app has multitasking camera access (check isMultitaskingCameraAccessSupported, then set isMultitaskingCameraAccessEnabled = true on the capture session), and on Android 14+ a call that keeps running in PiP needs a foreground service declared with the camera and microphone types. PiP for WebRTC content inside a WKWebView is still not reliable, so native is the path. Budget 60–100 hours for a production-grade iOS call-PiP. Our WebRTC architecture course and the business WebRTC guide give the broader stack context. If PiP is one piece of a larger calling product, our WebRTC development team builds the call stack and the iOS, Android and web PiP paths together.

PiP in React Native, Flutter and hybrid

React Native. Use the built-in PiP prop in react-native-video, or react-native-pip-android for Android. For WebRTC, pair react-native-webrtc with a small native bridge to the iOS video-call controller and the standard Activity PiP on Android. On Expo, expo-video exposes allowsPictureInPicture and startsPictureInPictureAutomatically on its video view.

Flutter. The floating and simple_pip_mode packages wrap Android PiP cleanly; iOS needs a platform channel to AVPictureInPictureController. Flutter-WebRTC PiP is workable, but budget 2–3 extra days for the iOS glue.

Capacitor / Cordova wrappers. Web PiP inside the web view is unreliable: Android WebView does not support it, and iOS needs allowsPictureInPictureMediaPlayback on the WKWebView plus the audio background mode. For production, add a small native PiP plugin per OS.

UX rules that make PiP actually useful

1. Make auto-PiP opt-in. Unsolicited PiP on tab switch reads as spyware. Offer a setting, default it off.

2. One PiP button, where users already look. On a video player that is bottom-right, next to fullscreen. Do not reinvent the placement.

3. Keep controls inside PiP. Play, pause, seek, skip, mute. On web that is mediaSession; on iOS and Android the system chrome handles it.

4. Restore state when PiP ends. Seek position, play/pause, volume, mute and fullscreen should all round-trip.

5. Respect DRM and ads. Disable PiP on unskippable ads and DRM-forbidden windows via disablePictureInPicture.

6. Treat accessibility as day-one work. The toggle needs an aria-label, a keyboard shortcut (P is common) and a visible focus ring; announce state changes to screen readers.

Tooling and libraries we reach for

Web players with built-in PiP. Video.js, Shaka Player, HLS.js, Bitmovin, THEOplayer and JW Player all support classic PiP out of the box. For Document PiP, plan on moving the player container into the PiP window yourself with the snippet above, because player-level support varies by version.

Android. AndroidX Media3 (ExoPlayer) plus a short PictureInPictureParams builder. For WebRTC, the official org.webrtc SurfaceViewRenderer.

iOS. AVKit, AVFoundation, AVPictureInPictureVideoCallViewController (iOS 15+) and AVSampleBufferDisplayLayer. Third-party: MobileVLCKit for non-AVPlayer content.

Testing matrix. At minimum: current Chrome and Edge, Safari 18 and 26, Firefox 153+ (151+ is enough for Document PiP), Android 8, 12 and 15+ on Samsung, Xiaomi and Pixel, and the two latest iOS releases on iPhone and iPad. BrowserStack, Sauce Labs or LambdaTest for the cloud grid.

Analytics hooks you need from day one

You cannot improve what you do not measure. Instrument six events and tag each with platform, device class and session ID:

1. pip_enter. When PiP activates, flagged user-initiated or auto.

2. pip_exit. When PiP ends, with duration and reason (user-closed, navigation, end-of-video, error).

3. pip_denied. API refused to enter PiP; log the error code to catch OEM quirks.

4. pip_control_click. Pause, play or next from inside the PiP window.

5. pip_state_mismatch. Exit left the player inconsistent; it should never fire if your restore logic is right.

6. pip_feature_seen. The user saw the PiP button, for conversion analysis against actual use.

Mini case: PiP on an education platform

Situation. An online-education client shipped Android, iOS and web, with lectures over HLS and live Q&A over WebRTC (the same kind of live-class load we run for Scholarly). Students wanted the lecture visible while taking notes. The recurring support ticket: “why does PiP work in YouTube and not in your app?”

The 4-week plan. Week 1: web classic PiP for VOD plus Document PiP for the WebRTC Q&A. Week 2: Android Activity PiP with Media3 and auto-enter. Week 3: iOS PiP via AVPlayerLayer for VOD and the video-call controller for Q&A. Week 4: UX pass, the six analytics hooks, and an App Review resubmission with the audio capability properly declared and used.

Outcome. Average session length rose about 11% in the first month; D7 retention among mobile-first users gained roughly 3 points; PiP-related support tickets went to zero. Total spend was around 170 engineering hours across two mobile engineers plus web. Want a similar assessment? Book a 30-minute call and we will scope it against your stack.

What shipping PiP actually costs

The estimates below assume our Agent-Engineering-accelerated workflow. Teams without that acceleration should add 40–60% more hours. Every number is engineering hours, not calendar time.

Figure 3. Engineering effort by scope. iOS WebRTC call PiP is the single most expensive line item.

Worked example. A typical “we want PiP everywhere” build lands mid-range: web classic 15h + Document PiP 60h + Android 45h + iOS AVPlayer 40h + iOS WebRTC call 80h + QA across 10 devices 30h = 270 hours. At an example blended rate of $80/hour that is 270 × $80 = $21,600 — a small line item next to the retention it buys, and far cheaper than the three separate discovery cycles most teams spend rediscovering these same traps.

Five pitfalls that sink PiP projects

1. Skipping iOS App Review due diligence. The “audio” background mode is inspected. Enable it and justify it: the app must actually continue audio in the background. A rejection cycle costs 5–10 days.

2. Not testing OEM skins on Android. Xiaomi MIUI, Huawei EMUI and some Samsung builds require a manual PiP permission. Surface a helper and log when the permission is missing.

3. Losing player state across enter and exit. The bug we fix most often. Keep a small PlayerState object and snapshot-restore on every transition.

4. Letting PiP escape your ads. Users pop unskippable ads into PiP and keep watching content. Set disablePictureInPicture during ad slots and flip it back after.

5. Accessibility as an afterthought. A missing aria-label, no keyboard shortcut, no focus ring: these are accessibility-audit findings waiting to happen. Build them in from the start.

KPIs to measure after shipping PiP

Quality. PiP enter success rate above 98%, exit-with-state-loss under 1%, and average PiP window duration above 45 seconds (proof users choose it rather than trigger it by accident).

Business. Session-length lift versus a control cohort, D7 and D30 retention lift, and feature awareness (unique users who used PiP at least once in 30 days).

Reliability. Crash rate no worse than the pre-PiP baseline, and App Store / Play Store review sentiment no worse after launch.

Decision framework: do you need PiP?

Five questions decide both whether to ship PiP and which tier to scope.

Figure 4. The decision tree maps your product to Skip, Tier 1, Tier 2 or Tier 3.

Q1. Is video or audio the core activity? Yes, PiP is table stakes. No, video is peripheral, skip it.

Q2. Do users multitask on the same device during playback? The more they do, the higher the return on PiP.

Q3. Is content DRM-gated or ad-heavy? Both shrink where PiP is allowed, so the scope narrows.

Q4. Is the product WebRTC-based? If yes, plan the call-PiP path (iOS video-call controller, Document PiP on web) from day one; on our projects, retrofitting it later cost 2–3× as much.

Q5. How many platforms ship? Web only is Tier 1: 10–20 hours, about 2 weeks. Add iOS and Android for Tier 2: 70–130 hours, 5–6 weeks. Add WebRTC call PiP and Document PiP for Tier 3: 170–310 hours, 8–10 weeks. Those weeks assume one engineer working platform by platform; with web, Android and iOS engineers in parallel, as in the mini case above, Tier 3 fits in about 4 weeks.

When you should not ship PiP

Video is incidental. If the product is a form with a short explainer clip, PiP adds complexity for negligible retention.

Strict DRM forbids off-window playback. Some content licences contractually prohibit PiP; check with legal before scoping it.

Audio-only products. The OS already provides lock-screen and media-control surfaces, so a custom PiP UI is wasted effort.

Kids’ products. Regulators increasingly discourage features that keep video playing while a child’s app is backgrounded. Default off, with a hard switch in settings.

FAQ

What does picture-in-picture mean?

Picture-in-picture (PiP) means a video keeps playing in a small floating window on top of other apps or tabs, so you can watch and do something else at the same time. It is a system feature on phones and computers, and each app or website has to support it.

How do I turn on picture-in-picture mode on Android or iPhone?

On Android, play a video and press Home or swipe up; if it does not float, allow it under Settings → Apps → Special app access → Picture-in-picture (the path varies by phone maker). On iPhone and iPad, PiP is on by default; check Settings → General → Picture in Picture.

What apps support picture-in-picture?

Most video and calling apps do, including YouTube, FaceTime and the major web browsers, but each app decides. YouTube, for example, expanded free PiP on iPhone beyond the US in April 2026 for long-form, non-music videos; music PiP remains a Premium feature.

Does Picture-in-Picture mode work in Safari on iPhone, not just iPad?

Since iOS 14, yes. Safari on iPhone supports PiP for video elements; earlier iOS versions did not. For in-app PiP on iPhone you still use AVPictureInPictureController.

Does PiP work for WebRTC video meetings?

Yes. On web, Document PiP is the preferred path because it keeps your controls. On iOS, use AVPictureInPictureVideoCallViewController (iOS 15+). On Android, plain Activity PiP with a SurfaceViewRenderer works.

Does Firefox support the Document Picture-in-Picture API?

Yes, on desktop, as of Firefox 151 (May 2026). Firefox 153 (July 2026) then added the standard requestPictureInPicture() API for classic video PiP, so desktop Firefox now supports both web PiP APIs; before that it offered only a browser-level toggle.

Does iOS PiP require background audio capability?

For PiP that keeps playing when the user leaves your app, yes. Add UIBackgroundModes with the “audio” value in Info.plist and set AVAudioSession to .playback. App Review checks that your app truly plays audio in the background, not just declares the capability.

Why does PiP not trigger on some Android phones?

Two common causes. First, PiP permission is disabled in system settings on Xiaomi and Huawei; surface a deep link to that screen. Second, the Activity does not declare supportsPictureInPicture="true", or the phone is a low-RAM model with PiP disabled; check FEATURE_PICTURE_IN_PICTURE before showing the button.

Does PiP reduce video quality or bitrate?

Not by itself: PiP does not change the network, so an ABR player keeps its rendition unless you cap quality to the player size (hls.js capLevelToPlayerSize, Shaka restrictToElementSize). For WebRTC with simulcast, the SFU drops the subscriber to a lower layer only if the client reports the smaller render size.

How much does it cost to add picture-in-picture to an app?

In our estimates it takes 10–20 engineering hours for web video PiP, 70–130 hours with native iOS and Android, and 170–310 hours for full coverage including WebRTC call PiP and Document PiP, plus 20–30 hours of device QA. At an example rate of $80/hour, a typical full build of about 270 hours comes to roughly $21,600.

How do you prevent PiP during ads?

On web, set disablePictureInPicture on the video element while an ad plays. On iOS, hide your PiP button and set canStartPictureInPictureAutomaticallyFromInline = false (the flag only blocks automatic start); on Android, call setAutoEnterEnabled(false) or exit PiP at ad start. Flip it back on at ad end.

Is PiP a core feature of modern OTT apps?

It is table stakes for mobile-first video products now. Our OTT platform development playbook treats PiP as an MVP feature alongside captions and casting.

What to Read Next

Ready to ship a PiP that users actually love?

Picture-in-Picture mode is the cheapest meaningful feature you can add to a video product in 2026. The classic web API now runs in every major desktop browser, Firefox included since version 153; Document PiP now spans Chromium and Firefox 151 and opens up meetings, editors and collaboration; Android is straightforward; iOS is only tricky if you skip the review checklist. For most OTT, education, telehealth and meeting products, the highest-impact move is to ship Tier 1 PiP now and plan Tier 3 right after it.

Fora Soft has shipped PiP on web, iOS, Android and WebRTC for years across video conferencing, e-learning and streaming products, and we run a full video-streaming curriculum for engineers. If you want a team that lands PiP in one focused build instead of three discovery cycles, that is what we do.