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.