diff --git a/player/picture-in-picture/scrollListener.js b/player/picture-in-picture/scrollListener.js index 34ca92b0..86f2bfaf 100644 --- a/player/picture-in-picture/scrollListener.js +++ b/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'); diff --git a/player/picture-in-picture/setup.js b/player/picture-in-picture/setup.js index 5ec714ee..9dcb2847 100644 --- a/player/picture-in-picture/setup.js +++ b/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); } -}); \ No newline at end of file +});