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

Discussion (11)

Collapse
prmichaelsen profile image
Patrick Michaelsen • Edited on

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
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
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
mdaralola profile image
{{ Micheal Daralola }} • Edited on

How did you get the EMBED id?

Collapse
nivethan profile image
Nivethan Ariyaratnam

you can find it last on the url

Collapse
iqbalbary profile image
Iqbal Bary Shuvo

Excellent

Collapse
samcross profile image
Sam Cross • Edited on

As simple as it could be, thanks!

Collapse
tomshaw profile image
Tom Shaw

Nice!

Collapse
dpagey profile image
Pagey

Awesome, exactly what I needed, thank you!

Collapse
nivethan profile image
Nivethan Ariyaratnam • Edited on

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?