LonelyCpp / react-native-youtube-iframe

A wrapper of the Youtube-iframe API built for react native.
https://lonelycpp.github.io/react-native-youtube-iframe/
MIT License
603 stars 153 forks source link

how make full screen mode, landscape mode #219

Closed danil251 closed 2 years ago

danil251 commented 2 years ago

Please explain how to force open in landscape mode when opening full screen, android

LonelyCpp commented 2 years ago

You'll get a callback when a user goes into full screen mode on android.

You can then put the app in landscape mode using some API I guess?

how to control app orientation is out of scope for this project. Let me know if you have any questions specific to the youtube player

shubhamchepe commented 1 year ago

Hey!, Even if i am not using any of the orientation libraries, and when i turn on auto-rotate mode in android app and turn phone for landscape mode, the player works for fraction of second and returns back to previous screen. and when i wsed with the orientation library, even then the problem was same.

https://github.com/LonelyCpp/react-native-youtube-iframe/assets/34737632/37750ec8-0d64-4296-abde-2fb9d3deb409

Screenshot (159)

palashkulsh commented 4 months ago

pieces of code for someone still looking

    import OrientationLocker from 'react-native-orientation-locker';

    const [isFullScreen, setIsFullScreen] = useState(false);

    const handleFullScreenChange = (isFullScreen) => {
        setIsFullScreen(isFullScreen);
        if (isFullScreen) {
            OrientationLocker.lockToLandscape();
        } else {
            OrientationLocker.lockToPortrait();
        }
    };

                <YoutubePlayer
                    ref={playerRef}
                    height={isFullScreen ? height*contentScale : 200}
                    width={isFullScreen ? width*contentScale : '100%'}
                    videoId={videoId}
                    play={true}
            allowWebViewZoom={true}
                    onChangeState={(event) => console.log(event)}
                    onFullScreenChange={handleFullScreenChange}
            contentScale= {contentScale}
                />