Dear Bitmovin Team,
I am encountering a UI duplication issue when switching to fullscreen mode in Android mobile browsers.
We are using Bitmovin Player version 8.115.0. Our codebase is slightly outdated and does not include the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />. We have intentionally avoided adding it, as it would require extensive CSS modifications. Instead, responsiveness is managed using vw/rem units and, in some cases, min-width media queries. We also inject custom controls into the default controls container.
The issue occurs when switching to fullscreen mode. In normal screen mode, the UI functions as expected. However, when going fullscreen, an additional controls container appears, displaying the seek bar and timer. Fullscreen and volume controls also appear at the top right. Before fullscreen, the container state is bmpui-ui-uicontainer bmpui-flexbox bmpui-layout-max-width-1200 bmpui-controls-shown bmpui-player-state-playing. After entering fullscreen, the state changes to bmpui-ui-uicontainer bmpui-flexbox bmpui-hidden bmpui-player-state-playing bmpui-fullscreen bmpui-layout-max-width-400 bmpui-controls-hidden. We want to prevent any modifications to the UI container when switching between normal mode, fullscreen mode, or rotating the screen on mobile devices. Instead, we will handle the UI using our custom controls.
In another project using ReactJS, we initially faced a similar duplication issue when rotating the screen. We resolved it by adding the following:new UIManager(playerInstance, UIFactory.modernUI({ autoUiVariantResolve: false }));
However, applying the same fix in our older codebase did not resolve the issue.
Please let us know if you require any further clarification.
Thanks & Regards,
Nihar Ranjan Rout
nihar.te@starzplayarabia.com