How to trigger full-screen mode on play for embedded YouTube video in React Native WebView?

Question

I have a YouTube video embedded in a React Native WebView. I'm using the react-native-android-fullscreen-webview-video library for Android which works well in both portrait and landscape mode, but I need the video to default to fullscreen when the user presses play.

I've tried other libraries for this, including react-native-youtube, but each resulted in buggy playback either in portrait or landscape.

This is my code. Everything works well, I just need fullscreen play by default.

<WebView source={{ uri: videoUrl }} />

Answer 1

This is working fine for me

<WebView
 javaScriptEnabled={true}
 scrollEnabled={false}
 allowsFullscreenVideo={true}
 userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 
 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
 source={{uri: `https://www.youtube.com/embed/${videoID}?&autoplay=1&mute=1&showinfo=0&controls=1&fullscreen=1`}}
 style={styles.video}
/>

Answer 2

This library works

react-native-android-fullscreen-webview-video

import WebView from 'react-native-android-fullscreen-webview-video';
<WebView style={{flex:1, height: 300} source={{ uri: 'https://www.youtube.com/embed/GV0B6nGf9mcrel=0&autoplay=0&showinfo=0&controls=1&fullscreen=1' }}/>

Answer 3

Just use this code:

allowFullScreen: {true}

Answer 4

I am a little late to answer this question but now you can use the react-native-youtube-iframe package to achieve this.

import React from 'react';
import {Modal, StyleSheet, View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';
import {hp, wp} from '../../helpers/Responsiveness';

const VideoModal = ({videoId, setModal, showVideoModal}) => {
return (
<Modal
  animationType="slide"
  transparent={true}
  visible={showVideoModal}
  onRequestClose={() => {
    setModal();
  }}>
  <View style={styles.centeredView}>
    <View style={styles.modalView}>
      <YoutubePlayer
        height={hp(100)}
        width={wp(100)}
        play={false}
        videoId={videoId}
        webViewProps={{
          injectedJavaScript: `
        var element = document.getElementsByClassName('container')[0];
        element.style.position = 'unset';
        element.style.paddingBottom = 'unset';
        true;
      `,
        }}
      />
    </View>
  </View>
</Modal>
 );
 };

const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.3)',
},
modalView: {
backgroundColor: 'black',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
  width: 0,
  height: 2,
  },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
height: '100%',
width: '100%',
justifyContent: 'center',
  },
  modalText: {
  marginBottom: 15,
  textAlign: 'center',
  },
  });

export default VideoModal;

Answer 5

try this way and you can use many iframe property for youtube button and many things to do

<WebView
        style={{flex:1}}
        javaScriptEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0&fullscreen=1'}}
/>