Añadir vídeo de YouTube en React

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos añadir un vídeo de YouTube en React.

Lo primero que tenemos que hacer es añadir esta dependencia:

npm install react-youtube --save

Una vez instalada vamos a crear el componente que se va a encargar de abrir el vídeo de YouTube.

La llamamos YoutubePlayer.tsx

import React from 'react';
import YouTube, { YouTubeProps } from "react-youtube";

interface Props {
  idYoutubeVideo: string;
}

const YoutubePlayer: React.FC<Props> = ({ idYoutubeVideo }) => {

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
  };

  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <YouTube videoId={idYoutubeVideo} opts={opts} onReady={onPlayerReady} id="video" />
    </div>
  );
};

export default YoutubePlayer;

Puedes personalizar las opciones añadiendo playerVars: referencia.

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      //autoplay: 1,
    },
  };

Y este es el resultado: