Embed youtube video in Webview of React Native

Question

I am trying to play Youtube videos in react native android/ios app. I have defined a webview:

<WebView
    style={styles.frame}
    url={this.props.url}
    renderLoading={this.renderLoading}
    renderError={this.renderError}
    automaticallyAdjustContentInsets={false}
/>

And passing the url of the video I want to play:

this.navigate('Play', 'https://www.youtube.com/watch?v=RJa4kG1N3d0')

But this displays the whole youtube page in the webview including the comments section.

I want to display only the video section and not the comment section. Is there anything missing in the url?

just a comment, Google will block your app if its playing videos outside of youtube. — giannisf, Jul 01 '16 at 20:01
Make sure your video in Android doesn't keep playing in the background when you lock the device. Otherwise the app will be rejected from the Google Play Store. — Agu Dondo, Aug 04 '17 at 17:23

score 20 · Answer 1 · edited Nov 28 '17 at 03:20

20

The easiest way to embed YouTube in the React Native iOS device is to use the <WebView>. All you need to do is to replace watch?v= with embed. This will not work with Android.

Example:

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

edited Nov 28 '17 at 03:20

Community

1
1

answered Aug 04 '16 at 05:55

vincent mathew

4,278
3
27
34

1

Working for me in both android emulator and device (htc desire), just using flex did not work. (had to specify height and width) – Adrien Joly Oct 23 '17 at 15:58
3

My app was rejected from the Google Play store using this method, check here for alternate solutions -- https://stackoverflow.com/questions/36382935/ – Clay Apr 21 '18 at 17:59

score 6 · Answer 2 · answered Jan 18 '19 at 12:54

6

This code worked for me

<WebView
        style={{ marginTop: 20, width: 320, height: 230 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/-ZZPOXn6_9w" }}
      />

answered Jan 18 '19 at 12:54

Nick.K

320
6
11

Ali Haider · Answer 3 · 2019-09-04T13:34:19.757

I had your problem. You want your users to pass video tutorial as props, but a naive user don't know what is embedded link, he will just copy and paste an URL from browser and paste it, which will not be the embedded one, but you can convert it. See this example:

Original Video :- https://www.youtube.com/watch?v=qaiLSpqeBHY
Embedded Video :- https://www.youtube.com/embed/qaiLSpqeBHY

Lets see how you can convert it:

const OriginalVideo = "https://www.youtube.com/watch?v=qaiLSpqeBHY"

const SplitedVideo = OriginalVideo.split("watch?v=")

const Embed = SplitedVideo.join("embed/")

console.log(Embed)

Here is your embedded video converted from original video URL.

Live Example:-

   componentDidMount() {
        const Video = this.props.navigation.getParam("Video");

        const MyVideo = Video.split("watch?v=");

        const EmbededVideo = MyVideo.join("embed/");

        this.setState({
         Video: EmbededVideo
        });
        }

score 4 · Answer 4 · edited May 23 '17 at 12:25

I think you can load the embed html from youtube with the video, directly into your react native webview. Rather than navigating to a url you would instead set the source attribute of the WebView to your html, like so:

<WebView source={{ html: "HTML here" }} 
.../>

based on this stack overflow post describing how to load a youtube iframe into an normal android webview you could replace "HTML here" with the actual html so it would look like:

<WebView source={{ html: "<html><body>Look Ma' a video! <br /> <iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>" }} 
.../>

You can get the directions for getting the embed link for a youtube video here.

score 0 · Answer 5 · answered May 22 '23 at 09:11

<WebView
  style={{ flex: 1, aspectRatio: 16 / 9 }}
  source={{ uri: 'https://www.youtube.com/embed/LXb3EKWsInQ?rel=0&autoplay=1&showinfo=0' }}
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={Platform.OS !== 'android' || Platform.Version >= 17 ? false : undefined}
  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"
/>

Support autoplay (without auto fullscreen)
Tested both iOs and Android

score 0 · Answer 6 · answered May 22 '23 at 09:50

I recommend to use react-native-youtube-iframe

Code: https://lonelycpp.github.io/react-native-youtube-iframe/basic-usage

import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";

export default function App() {
  const [playing, setPlaying] = useState(false);

  const onStateChange = useCallback((state) => {
    if (state === "ended") {
      setPlaying(false);
      Alert.alert("video has finished playing!");
    }
  }, []);

  const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
  }, []);

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={"iee2TATGMyI"}
        onChangeState={onStateChange}
      />
      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
    </View>
  );
}

score 0 · Answer 7 · answered Jun 05 '23 at 14:44

0

User Javascript replace()

<WebView
   mediaPlaybackRequiresUserAction={true}
   source={{
   uri: video_url.replace("watch?v=", "embed/"),
  }}
  style={styles.video}
  javaScriptEnabled={true}
  />

answered Jun 05 '23 at 14:44

Vipul Parmar

11
3

Embed youtube video in Webview of React Native

7 Answers7