> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Picture-in-Picture

> CometChat Calling SDK v5 - Picture-in-Picture for JavaScript

Picture-in-Picture (PiP) allows the call video to continue playing in a floating window while users interact with other content on the page or other browser tabs.

## Enable Picture-in-Picture

Enable PiP mode during a call:

```javascript theme={null}
CometChatCalls.enablePictureInPictureLayout();
```

## Disable Picture-in-Picture

Return to the normal call view:

```javascript theme={null}
CometChatCalls.disablePictureInPictureLayout();
```

## Browser Support

Picture-in-Picture support varies by browser:

| Browser | Support        | Notes                        |
| ------- | -------------- | ---------------------------- |
| Chrome  | ✅ Full support | Chrome 70+                   |
| Edge    | ✅ Full support | Chromium-based               |
| Safari  | ✅ Full support | Safari 13.1+                 |
| Firefox | ⚠️ Limited     | Behind flag in some versions |
| Opera   | ✅ Full support | Opera 57+                    |

## Check PiP Support

Before enabling PiP, check if the browser supports it:

```javascript theme={null}
function isPiPSupported() {
  return document.pictureInPictureEnabled || false;
}

if (isPiPSupported()) {
  CometChatCalls.enablePictureInPictureLayout();
} else {
  console.log("Picture-in-Picture not supported in this browser");
}
```

## PiP Events

The SDK doesn't provide specific PiP events, but you can listen to the browser's native PiP events on the video element if needed:

```javascript theme={null}
// If you have access to the video element
videoElement.addEventListener("enterpictureinpicture", () => {
  console.log("Entered PiP mode");
});

videoElement.addEventListener("leavepictureinpicture", () => {
  console.log("Left PiP mode");
});
```

## User-Initiated PiP

Browsers typically require PiP to be triggered by a user gesture (click, tap). Wrap the enable call in a button handler:

```javascript theme={null}
document.getElementById("pip-btn").addEventListener("click", () => {
  CometChatCalls.enablePictureInPictureLayout();
});
```

## Auto-PiP on Tab Switch

Some browsers support automatic PiP when switching tabs. This is a browser-level feature and may require user permission.

```javascript theme={null}
// Check if auto-PiP is available (Chrome)
if ("documentPictureInPicture" in window) {
  // Document PiP API available
}
```

## Styling Considerations

When PiP is active:

* The main call container may appear empty or show a placeholder
* Consider showing a message indicating the call is in PiP mode
* Provide a button to exit PiP and return to the full view

```javascript theme={null}
let isPiPActive = false;

function togglePiP() {
  if (isPiPActive) {
    CometChatCalls.disablePictureInPictureLayout();
    isPiPActive = false;
  } else {
    CometChatCalls.enablePictureInPictureLayout();
    isPiPActive = true;
  }
  updateUI();
}

function updateUI() {
  const placeholder = document.getElementById("pip-placeholder");
  placeholder.style.display = isPiPActive ? "block" : "none";
}
```