How to Embed a YouTube Video into a React App?

Sometimes, we want to embed a YouTube video into a React app.

In this article, we’ll look at how to embed a YouTube video into a React app.

Embed a YouTube Video into a React App

To embed a YouTube video into a React app, we can add an iframe into a React component with the embed video URL as the value of the src prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <iframe
        src="https://www.youtube.com/embed/E7wJTI-1dvQ"
        frameborder="0"
        allow="autoplay; encrypted-media"
        allowfullscreen
        title="video"
      />{" "}
    </div>
  );
}

We set src to the URL of the video we want to display.

frameborder is set to 0 to remove the iframe’s border.

allowfullscreen lets the user make the video full screen.

Conclusion

To embed a YouTube video into a React app, we can add an iframe into a React component with the embed video URL as the value of the src prop.