0

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?

dba
  • 220
  • 1
  • 10
  • 23

2 Answers2

1

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

Something like that should work: 

<iframe frameborder="0" width="100%" height="100%"
    src={this.props.src} webkitAllowFullScreen={true}
    mozAllowFullScreen={true} allowFullScreen={true} />
hisener
  • 1,431
  • 1
  • 17
  • 23
  • This just prints allowFullScreen, but no mozAllowFullScreen or webkitAllowFullScreen. – dba Jun 29 '17 at 08:16
  • @dba yes, does not work. sorry about that. out of topic why do you need mozAllowFullScreen and webkitAllowFullScreen? They're deprecated: https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe – hisener Jun 29 '17 at 08:30
  • 1
    By the way, you can set these attributes on componentDidMount function if it is ok. – hisener Jun 29 '17 at 08:37
  • Iam trying to insert a vimeo iframe inside a webpage, but the video does not play on iOS Devices. Official Vimeo Support said we should add these two attributes – dba Jun 29 '17 at 08:39