Reproducir vídeos de Youtube sin YoutubeAPI (sin api key) en React Native

Tiempo de lectura: 2 minutos

Os voy a enseñar cómo podemos reproducir vídeos de Youtube, sin necesidad de utilizar la librería de Youtube para React Native. De esta forma no tendrás que añadir un API Key para reproducir vídeos.

Lo primero de todo, tenemos que crear un Screen con un Webview.

Para ello primero instalamos Webview:

npm install react-native-webview --save

Una vez instalado, creamos nuestro Screen:

import React, { useState } from "react";
import { View, StyleSheet} from "react-native";
import { WebView } from 'react-native-webview';


//Componente boton
const VideoWebView = ({route}) => {

     const { id_video_youtube } = route.params;

    var urlYoutube = 'https://www.youtube.com/watch?v=' + id_video_youtube;

    return (
        <View style={styles.contenedorInicio}>
            <View style={styles.contenedorVideo}>
                <WebView style={[styles.webview]} source={{ uri: urlYoutube }} />
            </View>
        </View>
    )
};
export default VideoWebView;

const styles = StyleSheet.create({
    contenedorInicio: {
        flex: 1,
        alignContent: 'center',
        alignItems: 'center',
    },
    webview: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        flex: 1,
    },
    contenedorVideo: {
        flex: 10,
        width: '100%',
        height: '100%',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Con este código ya tenemos creado nuestro WebView que además se ajusta a pantalla completa (Ajustar WebView width: 100% en React Native).

Para reproducir los vídeos de YouTube, utilizamos el id_video_youtube que suele ser en este formato: DDJnOPkaAK7

Se concatena a la URL: https://www.youtube.com/watch?v=

De esta forma ya se puede reproducir directamente en YouTube.

Si queremos que solo aparezca el vídeo en la pantalla, cambiamos la URL por esta:

var urlYoutube = "https://www.youtube.com/embed/" + id_video_youtube;

De esta forma aparece el vídeo ocupando toda la pantalla.

Si queremos permitir full-screen y controles de vídeo en Android / iOS, tendremos que poner lo siguiente en el WebView:

<WebView style={[styles.webview]}  allowsFullscreenVideo={true} allowsInlineMediaPlayback={true} source={{ uri: urlYoutube }} />

Añadimos allowsFullScreenVideo y allowsInLineMediaPlayback ambos a true, para permitir fullscreen. Esto lo puedes encontrar en la documentación oficial (https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#allowsfullscreenvideo)