diff --git a/package-lock.json b/package-lock.json
index 419ebf08a..5cc8d9409 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "react": "^18.3.1",
         "react-native": "^0.76.5",
         "react-native-builder-bob": "^0.23.2",
-        "theoplayer": "^8.8.3",
+        "theoplayer": "^8.9.0",
         "typedoc": "^0.25.13",
         "typedoc-plugin-external-resolver": "^1.0.3",
         "typedoc-plugin-mdn-links": "^3.3.4",
@@ -10561,9 +10561,9 @@
       "dev": true
     },
     "node_modules/theoplayer": {
-      "version": "8.8.3",
-      "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-8.8.3.tgz",
-      "integrity": "sha512-2rJ/Pk9dKS8XwIlItZvilAClv85uS3BkLNX9Lv+0tomG/5a2ZNubrtC7Y6aHINx7YFSXbvqIB39VRqnIfAqvSA==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-8.9.0.tgz",
+      "integrity": "sha512-739n9MyNyObftFlamPbXINhwH7QJFQX6EZek7OoBUsZdRS2D9TmEL6ubAXXzz9RgpMV7EoCOx4uN+pFzih9/3A==",
       "dev": true
     },
     "node_modules/throat": {
diff --git a/package.json b/package.json
index 4df48fb88..a5b879df4 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "react": "^18.3.1",
     "react-native": "^0.76.5",
     "react-native-builder-bob": "^0.23.2",
-    "theoplayer": "^8.8.3",
+    "theoplayer": "^8.9.0",
     "typedoc": "^0.25.13",
     "typedoc-plugin-external-resolver": "^1.0.3",
     "typedoc-plugin-mdn-links": "^3.3.4",
diff --git a/src/internal/adapter/web/WebPresentationModeManager.ts b/src/internal/adapter/web/WebPresentationModeManager.ts
index bd231bca9..1c0ce2c6a 100644
--- a/src/internal/adapter/web/WebPresentationModeManager.ts
+++ b/src/internal/adapter/web/WebPresentationModeManager.ts
@@ -15,6 +15,7 @@ export class WebPresentationModeManager {
   constructor(player: ChromelessPlayer, eventForwarder: DefaultEventDispatcher<PlayerEventMap>) {
     this._player = player;
     this._eventForwarder = eventForwarder;
+    this._player.presentation.addEventListener('presentationmodechange', this.updatePresentationMode);
   }
 
   get presentationMode(): PresentationMode {
@@ -39,7 +40,7 @@ export class WebPresentationModeManager {
           }
         }
       } else if (presentationMode === PresentationMode.pip) {
-        void this._element?.requestPictureInPicture?.();
+        this._player.presentation.requestMode('native-picture-in-picture');
       } else {
         if (this._presentationMode === PresentationMode.fullscreen) {
           const promise = document[fullscreenAPI.exitFullscreen_]();
@@ -56,7 +57,7 @@ export class WebPresentationModeManager {
       if (presentationMode === PresentationMode.fullscreen) {
         this._element?.webkitEnterFullscreen?.();
       } else if (presentationMode === PresentationMode.pip) {
-        this._element?.webkitSetPresentationMode?.(PresentationMode.pip);
+        this._player.presentation.requestMode('native-picture-in-picture');
       } else {
         this._element?.webkitSetPresentationMode?.(PresentationMode.inline);
       }
@@ -74,15 +75,6 @@ export class WebPresentationModeManager {
         }
       }
     }
-    // listen for pip updates on element
-    if (this._element !== undefined) {
-      this._element.onenterpictureinpicture = () => {
-        this.updatePresentationMode();
-      };
-      this._element.onleavepictureinpicture = () => {
-        this.updatePresentationMode();
-      };
-    }
     // listen for fullscreen updates on document
     if (fullscreenAPI !== undefined) {
       document.addEventListener(fullscreenAPI.fullscreenchange_, this.updatePresentationMode);
@@ -95,7 +87,7 @@ export class WebPresentationModeManager {
     let newPresentationMode: PresentationMode = PresentationMode.inline;
     if (fullscreenAPI !== undefined && document[fullscreenAPI.fullscreenElement_] !== null) {
       newPresentationMode = PresentationMode.fullscreen;
-    } else if (document.pictureInPictureElement !== null) {
+    } else if (this._player.presentation.currentMode === 'native-picture-in-picture') {
       newPresentationMode = PresentationMode.pip;
     }