Embedding youtube videos in a react native app
Recently I had to embed a youtube video in a react native app for one of the project I was working on. I’ll try to list the different packages I tried to implement and the issues which I faced and the actual solution which worked for me.
Method 1 -
Using react-native-webview — https://github.com/react-native-community/react-native-webview
I imported react-native-webview in my project and tried to pass the embedded URL of youtube as uri in source
import { WebView } from 'react-native-webview';<WebView
allowsFullscreenVideo
allowsInlineMediaPlayback
mediaPlaybackRequiresUserAction
source={{ uri: 'https://www.youtube.com/embed/jzD_yyEcp0M' }}
/>
The issue with this method is the video loads as expected but when you try to play the video it throws an error saying Video unavailable
For some reason most of the videos which you try to play will throw this error, except for few copyright free videos, I don’t know the reason why and because of this I was not able to use this method.
Method 2 -
Using react-native-youtube — https://github.com/davidohayon669/react-native-youtube
<YouTube
apiKey="YOUTUBE_API_KEY"
videoId={this.state.videoId} // The YouTube video ID
play // control playback of video with true/false
fullscreen={false} // control fullscreen or inline
loop={false} // control whether the video should loop when ended
showinfo
controls={1}
rel={false}
style={style} />The above project uses Youtube API in android and WKWebView in iOS.
I installed the above package into my project and implemented as explained in the project. On Android it worked like a charm. But on iOS almost all the youtube videos loaded but I ended up facing issues every now and then, where the video loads as expected, but when you play the video. It plays for a second and pauses, when you click on play, again it plays for a second and pauses.
When I tried to debug it, I ended up knowing that the error thrown by the player when it pauses was UNAUTHORIZED_OVERLAY
I tried dig into the issues of the above project but was unable to find a solution for my issue.
Again I was not confident to use this method in the project.
Method 3 -
Using react-native-youtube-iframe — https://github.com/LonelyCpp/react-native-youtube-iframe
import React, {useRef, useState} from 'react';
import YoutubePlayer from 'react-native-youtube-iframe';<YoutubePlayer
ref={this.playerRef}
height={300}
width={400}
videoId={"jzD_yyEcp0M"}
play={this.state.playing}
onChangeState={event => console.log(event)}
onReady={() => console.log("ready")}
onError={e => console.log(e)}
onPlaybackQualityChange={q => console.log(q)}
volume={50}
playbackRate={1}
initialPlayerParams={{
cc_lang_pref: "us",
showClosedCaptions: true
}}
/>
The issue with the above package is same as our Method 1 only copyright free videos play correctly remaining videos threw an error Video unavailable
Yet again I was not able to use this in the project.
Method 4 -
Spoiler : The method which worked for me.
Thanks to following comments —
I first implemented webpage which returned an iframe with the videoId which I passed to it.
Here is a code which I used in my webpage -
<html><style>
html {
overflow: hidden;
background-color: black;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
display: block;
width: 100%;
border: none;
overflow: hidden;
padding-bottom: 100;
}
</style><body> <iframe
id="thisIframe"
width="100%" height="100%"
src="https://www.youtube.com/embed/jzD_yyEcp0M?rel=0&enablejsapi=1&playsinline=1&showInfo=0&controls=1&fullscreen=1"frameborder="0"allowfullscreen="true"></iframe></body><script> const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var s = document.getElementById('thisIframe');
s.src = `https://www.youtube.com/embed/${urlParams.get('videoId')}?rel=0&enablejsapi=1&playsinline=1&showInfo=0&controls=1&fullscreen=1`;</script></html>
I passed a videoId to this URL hosted in my server.
The URL looked something like — https://www.mywebsite.com/playVideo?videoId={videoId}
In the app I passed it in uri of the source of the webview.
import { WebView } from 'react-native-webview';<WebView
ref={this.webViewRef}
allowsFullscreenVideo
useWebKit
onLoad={this.webViewLoaded}
allowsInlineMediaPlayback
mediaPlaybackRequiresUserAction
javaScriptEnabled
scrollEnabled={false}
source={{ uri: 'https://www.mywebsite.com/playVideo?videoId=jzD_yyEcp0M' }}
style={[ style ]} />
And just like that all the issues which I faced were resolved and all the videos play which works on youtube iframe should work as expected.
Pro tip —
- If you want to hide the video suggestions on pause or at the end of the video follow this link — https://www.maxlaumeister.com/articles/hide-related-videos-in-youtube-embeds/
It uses javascript to create a layer of black screen to hide the suggestions. - If you want to avoid the the players from being redirected to different URLs from the iframe you can used two methods —
onShouldStartLoadWithRequestfor iOS andonNavigationStateChangefor Android. allowFullscreenVideois passed to webview to allow full screen of webview on Android.allowInlineMediaPlaybackis used to play the media inline in iOSmediaPlaybackRequiresUserActionis used to stop auto playing of video in webview as soon as it loads in iOS.
Hope this helps some fellow developers save some time. Cheers!
