tjallingt / react-youtube

react.js powered YouTube player component
http://tjallingt.github.io/react-youtube/
MIT License
1.86k stars 221 forks source link

Focus player on mount #180

Open ahmedu007 opened 5 years ago

ahmedu007 commented 5 years ago

Hi,

Thankyou for the amazing package. The keyboard shortcuts work great too, however, they only work when the iframe is selected and in focus. I'm trying to focus the player on load so the user can use keys to play / pause videos and use other controls. I've tried using refs but they didnt work. Is there any other way of doing it?

Here is my sample code:

class Videos extends Component {
  constructor() {
    super();

    this.playerRef = React.createRef();
  }

  componentDidMount = () => {
   this.playerRef.current.focus();
  };

  // _onReady = e => console.log(e.target);

  render() {
    const opts = {
      height: "390",
      width: "640",
      playerVars: {
        // https://developers.google.com/youtube/player_parameters
        autoplay: 1,
      },
    };
    return (
        <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} ref={this.playerRef} />
    );
  }
}
BradyEdgar94 commented 5 years ago

@ahmedu007 Did you ever find a solution to this?

ahmedu007 commented 5 years ago

No unfortunately :(

silnose commented 4 years ago

:( * 2