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
610 stars 155 forks source link

Inner Video Not resizing on FireTV #140

Open CyberCyclone opened 3 years ago

CyberCyclone commented 3 years ago

Describe the bug I've been having issues getting this to work using a FireTV Stick Lite which is running Android 9. The issues I'm facing is that I'll put the YouTube video into fullscreen and then start playing it. This works fine on an Android TV / Google TV, however on a FireTV the video inside the iFrame doesn't go full screen. As in, the YouTube controls and frame itself is fullscreen, but the video inside stays the same size that it was before I went fullscreen.

IMG_0186

To Reproduce Set the initial VideoContainer size to 50%. Set the size to 100% and start playing. The video won't expand to fill the component view.

Expected behavior The video portion fills the parent component view.

Smartphone (please complete the following information):

LonelyCpp commented 3 years ago

can you try doing this : https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123 (prevents the auto 16:9 resizing)

CyberCyclone commented 3 years ago

I gave it a go however it doesn't seem to have worked. I'm not sure if it's the same issue. I've attached another screenshot which should explain it more. As you can see from it, when I go to full screen the main video is staying the same size, while the YouTube iFrame is going full screen. You can see the YouTube channel logo at the bottom right is in the correct position. The video itself simply doesn't fill the screen.

IMG_0187

Here's the component just in case I've implemented your suggestion wrong:

<YoutubePlayer
    webViewStyle={{width:"100%", height: "100%"}}
    style={{width:"100%", height: "100%"}}
    pointerEvents="none"
    height={"100%"}
    play={!paused}
    videoId={source}
    onChangeState={onStateChange}
    webViewProps={{
        injectedJavaScript: `
            var element = document.getElementsByClassName('container')[0];
            element.style.position = 'unset';
            true;
        `,
    }}
/>

The parent component will resize itself based on whether I want fullscreen or not, and then the YoutubePlayer component stays at 100% of the component.

LonelyCpp commented 3 years ago

Since the player controls resize correctly, the react native web view is definitely working as intended. This looks like a problem with the YouTube player itself.

you can try opening YouTube.com on a WebView and see if fullscreen works.

(I won't be of much help here since I can't really test this myself)