DEV Community

Cover image for Simplest way to embed a Youtube video in your React app
bravemaster619
bravemaster619

Posted on

Simplest way to embed a Youtube video in your React app

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;
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

Result

Top comments (18)

Collapse
 
prmichaelsen profile image
Patrick Michaelsen • Edited

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.

Collapse
 
eyassh profile image
Eyas

@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 it embedId here, but the first argument to a React FunctionComponent is the props object. For this case, it will look something like this:

{
  embedId: "myidstring",
  children: null
}
Enter fullscreen mode Exit fullscreen mode

or similar.

Collapse
 
juansystems profile image
JuanSystems

Funciona bien. Pero me sale este error 404 en la consola de chrome:

GET youtube.com/img/meh7.png 404 index.js:1962

Image description

Collapse
 
abdallahabusedo profile image
abdallah abu sedo

wow great and fast way ,
can you explain to me how to fetch the embedId from and playlist videos

Collapse
 
tomshaw profile image
Tom Shaw

Nice!

Collapse
 
nivethan profile image
Nivethan Ariyaratnam • Edited

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?

Collapse
 
yashkapure06 profile image
Yash Kapure

I am trying the same since hours but I am not getting the results.
As well as there is no error in console_

Collapse
 
dpagey profile image
Pagey

Awesome, exactly what I needed, thank you!

Collapse
 
hhsm95 profile image
Hugo Sandoval

Thanks, works like a charm!

Collapse
 
britt_joiner profile image
Brittany Joiner

This was awesome! Worked really well for me as well!

Collapse
 
iqbalbary profile image
Iqbal Bary Shuvo

Excellent