在 ReactJs JSX 中设置属性 mozallowfullscreen 或 webkitAllowFullScreen答案

【问题标题】：Set attribute mozallowfullscreen or webkitAllowFullScreen in ReactJs JSX在 ReactJs JSX 中设置属性 mozallowfullscreen 或 webkitAllowFullScreen
【发布时间】：2017-06-29 08:09:09
【问题描述】：

我正在尝试在这样的网页中包含 Vimeo Iframe（JSX 代码）：

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

渲染的是这样的：

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

如何实现所需的 mozAllowFullScreen 和 webkitAllowFullScreen 属性？在 React Docs (https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) 中只提到了 allowfullscreen 属性？

【问题讨论】：

标签： reactjs iframe html5-fullscreen

【解决方案1】：

尝试将true 作为字符串传递。这对我有用（React 16）：

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

【讨论】：

【解决方案2】：

类似的东西应该可以工作：

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

【讨论】：

这只是打印 allowFullScreen，但没有 mozAllowFullScreen 或 webkitAllowFullScreen。
@dba 是的，不起作用。对于那个很抱歉。题外话为什么你需要 mozAllowFullScreen 和 webkitAllowFullScreen？它们已被弃用：developer.mozilla.org/en/docs/Web/HTML/Element/iframe
顺便说一句，如果可以的话，你可以在componentDidMount函数上设置这些属性。
我正在尝试在网页中插入 vimeo iframe，但视频无法在 iOS 设备上播放。 Vimeo 官方支持说我们应该添加这两个属性