how to embed video in react
1. Make a component for iframe:
//YoutubeEmbed.js
import React from "react";
import PropTypes from "prop-types";
const YoutubeEmbed = ({ embedId }) => (
<div className="video-responsive">
<iframe
width="853"
height="480"
src={`https://www.youtube.com/embed/${embedId}`}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title="Embedded youtube"
/>
</div>
);
YoutubeEmbed.propTypes = {
embedId: PropTypes.string.isRequired
};
export default YoutubeEmbed;
2. Add some css for responsiveness:
styles.css
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
3. Use it
Couldn't be simpler. Easy-breezy:
import React from "react";
import "./styles.css";
import YoutubeEmbed from "./YoutubeEmbed";
export default function App() {
return (
<div className="App">
<h1>Youtube Embed</h1>
<YoutubeEmbed embedId="rokGy0huYEA" />
</div>
);
}