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 (17)
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 itembedId
here, 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:
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?
I am trying the same since hours but I am not getting the results.
As well as there is no error in console_
Awesome, exactly what I needed, thank you!
Thanks, works like a charm!
This was awesome! Worked really well for me as well!
Nice!
How did you get the EMBED id?
you can find it last on the url
Excellent
As simple as it could be, thanks!
Thank you.
This was super helpful, and straight to the point. Thank you so much!
can you write it in functional components?