React - autoplay video on mobile with click event

Question

I have a React app with multiple images. When an image is clicked, it opens a modal where a youtube video is loaded via the iframe api.

I'm using this to load the video iframes https://www.npmjs.com/package/react-youtube

The modal is conditionally added and removed to the DOM using state modalVisible: true/false.

{this.state.modalVisible ?  <div className="Modal"><YouTube videoId="2g811Eo7K8U" onReady={this._onReady} /></div> : null}

This is great because it will only load the video if it needs to vs a traditional modal with the video loaded inside already on page load and then display block to show the modal when needed.

However on mobile videos can not autoplay (https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations) so with a traditional hide/show preloaded modal I could call a function when the image is clicked to show the modal and use event.target.playVideo(); to play the video essentially auto playing it. But when I do it by loading the video first into the modal when the image is clicked the video event.target.playVideo(); does not work when called on the onready function once the video has loaded:

_onReady(event) {
    // access to player in all event handlers via event.target
    event.target.playVideo();
}

Is there any way to load the video then autoplay it on a click function without loading the video before the click event occurs?

quotesBro quotesBro · Accepted Answer · 2017-12-15T12:02:28

No, there is no way to start video without a real user click (browser will understand it's not a real user action if you trigger click programmatically).

YT iframe must be in DOM already to start a video when user clicks on image.

React - autoplay video on mobile with click event

1 Answers