1

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.

U r s u s
  • 6,680
  • 12
  • 50
  • 88

1 Answers1

2

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

Community
  • 1
  • 1
user3136777
  • 176
  • 5