Is it possible to embed a Facebook video from a public post in a react-native
app?
If it is possible, I believe I need to use a <WebView>
component which is what I have used for several other types of video embeds, but the Facebook embed is different. We have achieved it on our web client, but there are some DOM specific aspects to it that I'm not sure how to recreate in react-native
.
This is the solution I have used successfully for other video types (e.g. Vine, Vimeo), but for FB it just renders an image
<WebView source={{ uri: 'https://www.facebook.com/TheWitBible/videos/1747642252158297/' }} style={ styles.media } />
Here are the docs https://developers.facebook.com/docs/plugins/embedded-video-player
Here is a FB SDK component, but I don't think it supports this use case https://github.com/facebook/react-native-fbsdk
In the web client there are 2 parts to get it to work
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml: true,
version: 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
............................
render() {
return (
<div ref={el => el && FB && FB.XFBML.parse(el)} className="fb-media-wrapper" style={{ width: this.props.width + 'px' }}>
<div className="fb-video" data-href={this.props.url} data-width={this.props.width}></div>
</div>
);
}
It worked with me
<WebView
style={styles.yourStyles}
source={{ uri: 'https://www.facebook.com/video/embed?video_id=<YOUR_ID_VIDEO>'}} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With