Disable CSS PiP, when native PiP is active already

player/picture-in-picture/scrollListener.js

@@ -5,9 +5,16 @@ function adjustPlayer() {
   const lowerEdge = container.offset().top + container.height();
   const switchToMinPlayerPos = lowerEdge - (window.innerHeight / 3);
   const currentScrollPos = document.body.scrollTop || document.documentElement.scrollTop;
+  const nativePipEnabled = player.getViewMode() === bitmovin.player.ViewMode.PictureInPicture;
+
+  /* Disable CSS PiP, if native PiP is already in use */
+  if (nativePipEnabled) {
+    document.querySelector('.player-switch').classList.remove('fixed-player');
+    return;
+  }
 
   /* toggle the css-class responsible for the player moving to the lower right corner */
-  if (currentScrollPos > switchToMinPlayerPos) {
+  if (currentScrollPos > switchToMinPlayerPos && !nativePipEnabled) {
     $('.player-switch').addClass('fixed-player');
   } else {
     $('.player-switch').removeClass('fixed-player');

player/picture-in-picture/setup.js

@@ -21,7 +21,10 @@ var conf = {
         )
         ;
       }
-    }
+    },
+    viewmodechanged: function() {
+      adjustPlayer();
+    },
   }
 };
 
@@ -44,4 +47,4 @@ player.load(source).then(function () {
   if (container.height() <= playerHeight) {
     container.height(playerHeight);
   }
-});
+});