Getting scrollable issue on youtube player

[saikiruba-mj]

Bug Description

We have tried the basic code snippet from here and got an scroll issue via horizontal and vertical view while passing height and width value to the example code.

const { width, height } = Dimensions.get('screen');

And the same issue was replicated on emulator and real devices.

Screenshots

• Device: Android and emulator
• OS + version: Android 11
• react-native-youtube-iframe 2.2.1
• react-native-webview 10.2.3

Kindly let us know if there is any solution to fix this issue.

Thank you!

[LonelyCpp]

this is due to the player always following a set aspect ratio by default. Use this snippet to disable it : https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123 (you have to reload the component for this prop to take effect, hot reload will not work)

also, please check if the height and width accounts for the status bar up top and the notch, if not - it would make sense to reduce it by a little.

[leticiabytes]

this is due to the player always following a set aspect ratio by default. Use this snippet to disable it : #13 (comment) (you have to reload the component for this prop to take effect, hot reload will not work)

also, please check if the height and width accounts for the status bar up top and the notch, if not - it would make sense to reduce it by a little.

I achieved the solution using this recommendation and adding zero margin

webViewProps={{
          // 
          injectedJavaScript: `
            var element = document.getElementsByClassName('container')[0];
            element.style.position = 'unset';
            element.style.padding = 0;
            element.style.margin = 0;
            true;
          `,
        }}