title: How to listen iframe keydown event with ReactJS
body: <p>I want to listen for a keydown event of an iframe in reactjs. In my iframe i have video embedded. Now when the video is playing i want to handle keyboard events.Can any one please help me how to listen for keyboard events. This is my code</p>
  
  <pre><code>class VideoDetail extends Component {
  
  videoLoad(e) {
      console.log('videoLoaded');
      this.videoFrame.addEventListener('keydown',this.onVideoDown);
  }
  
  onVideoDown(e) {
      console.log('key pressed'); // This is not invoking
  }
  
  componentDidMount() {
      console.log(this.videoFrame);
  }
  render() {
      const video = this.props.video;
      if (!video) {
          return &lt;div&gt;Loading...&lt;/div&gt;;
      }
  
      const videoId = video.id.videoId;
      const url = `https://www.youtube.com/embed/${videoId}`;
      return (
          &lt;div className="video-detail col-md-8"&gt;
              &lt;div className="embed-responsive embed-responsive-16by9"&gt;
                  &lt;iframe ref={(iframe) =&gt; { this.videoFrame = iframe; console.log(iframe); }} className="embed-responsive-item" src={url} onLoad={(e) =&gt; this.videoLoad(e)}&gt;&lt;/iframe&gt;
              &lt;/div&gt;
              &lt;div className="details"&gt;
                  &lt;div&gt;{video.snippet.title}&lt;/div&gt;
                  &lt;div&gt;{video.snippet.description}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  }
  </code></pre>