Overview
- Quick and simple
- No
npm i - Fully responsive
- Feel free to Copy & Paste
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>
);
}
Result
Top comments (19)
one change I needed:
export const YoutubeEmbed = (embedId) =>embedId && ( <iframe ... />);
jk that didn't fix my problem. for some reason it only works when I hard code the embedId
It's trying to fetch
embed/[Object object]For completenes sake, turns out it's a problem with my code that generates the
embedId. I wish you could edit comments so I didn't have to triple post, but alas.@prmichaelsen That's because you have a typo, instead of:
export const YoutubeEmbed = (embedId) =>try:
export const YoutubeEmbed = ({embedId}) =>The
[Object object]in your string is the first argument. You call itembedIdhere, but the first argument to a React FunctionComponent is the props object. For this case, it will look something like this:or similar.
wow great and fast way ,
can you explain to me how to fetch the embedId from and playlist videos
Funciona bien. Pero me sale este error 404 en la consola de chrome:
Awesome, exactly what I needed, thank you!
As simple as it could be, thanks!
Excellent
I am trying the same since hours but I am not getting the results.
As well as there is no error in console_
Really really need it, thank you very much !
Thanks, works like a charm!
the example video shows a thumbnail as expected but when i try with 2 videos they don't show any thumbnail but just a black screen! do you have any idea?