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?