react-native-youtube-iframe

react-native-youtube-iframe copied to clipboard

The current implementation seems to wrap a WebView with a View that has only width and height properties, where height is required. It is not responsive. In my use case, I require full style control over the view and used aspectRatio instead to make the View full width and keep everything 16:9. To avoid breaking changes, I would recommend passing a containerStyle prop and making height optional. This should be trivial, but let me know if you would like me to submit a PR.

Hi @gaberogan, providing a containerStyle makes a lot of sense.

I'll make the change as a patch release over the weekend. You're free to submit a PR if you like :)

Not able to make the height up to the red background.

<View
                    style={{
                      backgroundColor: 'red',
                      height: width,
                    }}>
                    <YouTube
                      height={width}
                      width={width}
                      videoId={pdData?.video_link}
                      onReady={() => setState({...state, isReady: true})}
                      onChangeState={(e) =>
                        setState({...state, status: e.state})
                      }
                      webViewProps={{
                        injectedJavaScript: `var element = document.getElementsByClassName('container')[0];
                        element.style.position = unset;
                        true;`,
                      }
                      onError={(e) => {
                        console.log('e=>', e);
                        setState({...state, error: e.error});
                      }}
                    
                    />
                  </View>

the player will have 16:9 aspect ratio by default, you can calculate the height by doing (screenWidth * 9 / 16)

if you want the player to expand into a custom height and ignore aspect-ratio, you can try this - https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123