Can't embed YouTube videos in React.js

Question

I am trying to embed a youtube video in my react.js website, I have tried multiple different code samples in my file as seen below:

<h1>Embedd Test1</h1>

<YouTube videoId="6pH4Ot-vFlc" />

<div>
    <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
        allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nqO6cEbXyKM"
        width="560"></iframe>
</div>

<h1>Embedd Test2</h1>
<iframe width="420" height="315" src="https://www.youtube.com/embed/fnqO6cEbXyKM"></iframe>

<h1>Embedd Test3</h1>
<iframe width="872" height="499" src="https://www.youtube.com/embed/nqO6cEbXyKM"
    title="Error fixed &quot;www.youtube.com refused to connect&quot; when trying to embed video in blogs or html page"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

But all of my embedded youtube videos always appear as "www.youtube.com refused to connect." both on localhost or in production at the url here: https://jermasearch.com/discogs2youtube

How can I embed YouTube videos in my react.js website? Is it a cors issue?

Aaditya Singh · Accepted Answer · 2025-04-26 03:31:59Z

1

Try setting the referrerpolicy attribute to "no-referrer" or removing it. You can also see if your browser is blocking the iframes because of security reasons.

answered 6 hours ago

Aaditya Singh

112 bronze badges

New contributor

Add a comment |

Radical Rosh · Accepted Answer · 2025-04-26 05:47:28Z

Try using this code, it worked for me. Might work for you too.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embed Test</title>
</head>
<body>
  <div>
    <h1>Embed Test</h1>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/nqO6cEbXyKM"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
</body>
</html>

Well apparently, this is not a CORS or React issue. It is almost always due to the video’s embed permissions or an invalid video ID. Use a valid, embeddable video and the standard iframe or react-youtube component.

TheMaster · Accepted Answer · 2025-04-26 09:05:19Z

0

import React from 'react';

const YouTubeEmbed = () => {
    return (
        <div style={{ position: "relative", paddingBottom: "56.25%", height: 0 }}>
            <iframe
                src="..."
                title="You Video"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                }}
            ></iframe>
        </div>
    );
};

export default YouTubeEmbed;

edited 1 hour ago

TheMaster

51.4k7 gold badges73 silver badges100 bronze badges

answered 1 hour ago

jewellerybym

11 bronze badge

New contributor

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– TheMaster
Commented 1 hour ago

Add a comment |

Collectives™ on Stack Overflow

Can't embed YouTube videos in React.js

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related