Embed Youtube Video in Expo Project

Question

I am trying to embed the following youtube video in an expo project: https://www.youtube.com/watch?v=mJ_fkw5j-t0

Based on the answers found here: How to play Youtube videos using Expo I tried to use the following code:

<WebView
            style={{flex:1}}
            javaScriptEnabled={true}
            source={{uri: 'https://www.youtube.com/embed/mOO5qRjVFLw'}}
        />
</View>

This works, up to a point, in that when the app loads, I am able to see the video, but when I try to click play, it says that the video does not exist (the embedded url was found by following google's instructions found here: https://support.google.com/youtube/answer/171780?hl=en).

I've also tried change the code to use the full embedding youtube gave me by changing the source to html as follows:

 <WebView
    source={{html: <iframe width="560" height="315"  
         src="https://www.youtube.com/embed/mJ_fkw5j-t0" frameborder="0"    
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>}}
 />

but this also causes a long error message that I do not understand. However, when I use someone else's example embedded video (original answer came from the previously linked stackoverflow page):

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

this works just fine, leading me to believe that it is the way in which I am obtaining the embedding link/using what youtube gives me, but I can't quite figure out what.
Any help would be greatly appreciated.

UPDATE: It seems that the issue is with the link youtube is generating--I have been experimenting with different youtube videos, and sometimes the embedding link works and sometimes it doesn't. When it doesn't work, it also doesn't work when I try to directly paste the embed link into my browser, and when it does work it works when I paste it into my browser, so it seems like this is more a bug with YouTube generating the embedding link/video rather than an issue with Expo.

Varun Rathore Varun Rathore · Accepted Answer · 2019-01-05T07:32:54

Here's how we format our URL for embedding a YouTube video within your app. https://www.youtube.com/embed/'+videoId+'?modestbranding=1&playsinline=1&showinfo=0&rel=0

Where the videoId is the unique identifier for a youtube video. For example the videoId for https://www.youtube.com/watch?v=0lZDDyAgnWs will be 0lZDDyAgnWs.

Hope this helps.

Embed Youtube Video in Expo Project

1 Answers