捕获点击 iframe 视频 在反应中

Question

我有一个自定义包装器组件

<wrapperC>
    <iframe title='abc' width='600' height='415' src={`https://www.youtube.com/watch?v=RKjk0ECXjiQ?autoplay=0`} allowFullScreen />
</wrapperC>

如果有人单击视频播放按钮，我找不到捕获onClick事件的方法。

onClick = () => {
    alert('clicked');
}
render() {
    const {
        children
    } = this.props;
    return (
        <div>
            <SomeOtherComponent onEnter={this.onEnter} onLeave={this.onLeave}>
                {React.cloneElement(children, { onClick: this.onClick })}
            </SomeOtherComponent>
        </div>
    );
}

有人可以向我建议一种捕获iframe视频上的点击事件的方法，这也将让我播放视频。

Answer 1

我最终创建了一个包装器组件来包装谷歌你管库。此库呈现 iframe 并提供对视频生活事件的访问。

Answer 2

我在使用自定义视频播放器时遇到了这样的问题，它实际上是一个 iframe。我最终得到了包装纸。最后它看起来像：

<div style={{
position: 'relative'
}}
 onClick={() => {
   console.log('hello'); //add your code here
 }}
>
  <div
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    'z-index': 100,
  }}
  }/>
  <iframe/> //you could use your custom React component which are iframe under the hood
</div>