askvity

How Do You Add a YouTube Video to React?

Published in React Video Embedding 3 mins read

Adding a YouTube video to your React application is straightforward, primarily using a dedicated library that simplifies embedding. As the reference states, "Adding YouTube videos to your React projects is easy with the React YouTube library. Simply install the library, add the YouTube component along with the YouTube ID to the video you want, and you're done!" This method leverages the official YouTube Player API for better control and integration compared to a simple iframe.

Here's a breakdown of the process:

The Recommended Approach: Using react-youtube

The most common and recommended way to embed YouTube videos in React is by using the react-youtube package. This library provides a React component that wraps the YouTube IFrame Player API, offering convenient props for configuration and event handling.

Step-by-Step Guide

To implement this, follow these simple steps:

  1. Install the Library:
    You need to add the react-youtube package to your project dependencies. Open your terminal in your project's root directory and run:

    npm install react-youtube
# or
yarn add react-youtube

  2. Import and Use the Component:
    In the React component where you want to display the video, import the YouTube component and use it, providing the unique ID of the YouTube video you wish to embed.

    import React from 'react';
import YouTube from 'react-youtube';

function VideoPlayer() {
  // Replace 'VIDEO_ID_HERE' with the actual YouTube video ID
  const videoId = 'VIDEO_ID_HERE';

  // Optional: Define options for the player
  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1, // Auto-play the video on load
    },
  };

  // Define event handlers (optional)
  const onReady = (event) => {
    // Access player in event.target
    event.target.pauseVideo();
  }

  return (
    <div>
      <h2>My YouTube Video</h2>
      <YouTube videoId={videoId} opts={opts} onReady={onReady} />
    </div>
  );
}

export default VideoPlayer;

Understanding the Key Prop

The essential part of the YouTube component is the videoId prop. This prop takes the unique identifier for the YouTube video you want to embed. You can find the video ID in the URL of the YouTube video, usually after v= (e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ - the ID is dQw4w9WgXcQ).

Prop Description Required? Example Value
videoId The ID of the YouTube video to play. Yes 'dQw4w9WgXcQ'
opts An object containing player parameters and size. No { height: '390' }
onReady Callback function when the player is ready. No (event) => {...}
onPlay Callback function when the video starts playing. No () => {...}
onPause Callback function when the video is paused. No () => {...}
onError Callback function on player error. No (event) => {...}

Using react-youtube ensures your video player is responsive and provides programmatic control over playback, volume, and other settings via its API methods, which are accessible through the onReady event handler.

This method directly aligns with the reference's simple instruction: install the library, add the component, and provide the YouTube ID.

Related Articles