CODEWITHSUNDEEP
javascriptiframereactjs
U r s u s
U r s u s

Reputation: 6968

Embed videos with iframe in React JSX

Apologies for naive question, because clearly I'm missing something obvious.

My simple stateless iframe component:

const Video = ({ src }) => (
  <iframe
    allowFullScreen
    frameborder="0"
    height="315"
    src={src}
    width="560"
  />
);
export default Video;

which I use like so in a Parent stateless component:

import Video from 'Video';

const Parent = (props) => (
  <div>
    <Video src="https://www.youtube.com/watch?v=WlRxNSRA7Rg"/>
  </div>
);

export default Parent;

This seems to render properly, but the iframe is blank.

I suspect is something to do with the media event that React supports, but any help would be appreciated.

Upvotes: 1

Views: 7621

Answers (1)

user3136777
user3136777

Reputation: 176

Setting the src for iframe in such a way is considered dangerous due to XSS attacks. You will have to use dangerouslySetInnerHTML. Read about it here

and see this

Upvotes: 2

Related Questions