CODEWITHSUNDEEP
reactjsiframesrc
meez
meez

Reputation: 4788

iframe src attribute is changing into data-src in my React application

In a React component I have an iframe:

<iframe
  css={styles.videoIframe}
  width="853"
  height="480"
  src={embedlink}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  title={title}
/>

When I am inspecting the DOM I see src has been changed to data-src?

<iframe width="853" height="480" data-src="http://www.youtube.com/embed/youtube-id-here" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="The title"></iframe>

I don't see the embedded YouTube video rendered? It might because of changing the attribute into data-src?

Upvotes: 2

Views: 1459

Answers (1)

meez
meez

Reputation: 4788

I ended up using the no-cookies embed for this. It works fine after changing my embed variable to:

const embedLink = `https://www.youtube-nocookie.com/embed/${youtubeId}`;

See also this answer.

Upvotes: 2

Related Questions