Set attribute mozallowfullscreen or webkitAllowFullScreen in ReactJs JSX

reactjs iframe html5-fullscreen
dba picture dba · Jun 29, 2017 · Viewed 14.3k times · Source

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?

Answer

user9735444 picture user9735444 · May 29, 2018

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

Related questions

How to set iframe content of a react component

I am trying to set the content of an iframe in a React component but I am not able to do it. I have a component in which contains a function which has to be called when the iframe finishes …

Read More
Is it possible to detect window.close from iframe?

I have a modal (a React component from my application), and inside it i have an iframe. I don't have control over the iframe, and I know it calls window.close after some action is taken. Is there a way …

Read More
How to trigger 'beforeunload' event from within an IFRAME

I have an application (name it B) which is being embbeded in an Iframe by another main application (Name it A or parent). So: App A-- // domain of A: https://mydomain/mainApp |___ App B in Iframe // domain in B: https://…

Read More