Set attribute mozallowfullscreen or webkitAllowFullScreen in ReactJs JSX

0
votes

Iam trying to include a Vimeo Iframe in a webpage like this (JSX Code): 

<iframe frameBorder="0" width="100%" height="100%" src={this.props.src} webkitAllowFullScreen mozAllowFullScreen allowFullScreen />

What gets rendered is this:

<iframe frameborder="0" width="100%" height="100%" src="https://player.vimeo.com/video/..." allowfullscreen=""></iframe>

How can I implement the needed mozAllowFullScreen and webkitAllowFullScreen Attributes? In the React Docs (https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) is only the allowfullscreen Attribute mentioned?

2
reactjsiframehtml5-fullscreen

2 Answers

1
votes

Try to pass true as a string. This works for me (React 16):

<iframe 
  frameBorder="0"
  width="100%" height="100%" 
  src={this.props.src}
  allowFullScreen="true"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
/>

More details here: https://github.com/facebook/react/issues/7848

0
votes

Something like that should work: 

<iframe frameborder="0" width="100%" height="100%"
    src={this.props.src} webkitAllowFullScreen={true}
    mozAllowFullScreen={true} allowFullScreen={true} />