DEV Community

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

Posted on

106 7

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

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (19)

Collapse
 
prmichaelsen profile image

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
 
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
 
dpagey profile image
Pagey

Awesome, exactly what I needed, thank you!

Collapse
 
transiient profile image
Transient • Edited

As simple as it could be, thanks!

Collapse
 
iqbalbary profile image
Iqbal Bary Shuvo

Excellent

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
 
boyld222 profile image
Tri Kiet

Really really need it, thank you very much !

Collapse
 
hhsm95 profile image
Hugo Sandoval

Thanks, works like a charm!

Collapse
 
nivethan profile image

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?

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping