Как исправить требуемое "двойное касание", чтобы активировать мой React-Player Iframe на мобильных устройствах?

Question

Я использую React-Player ( https://www.npmjs.com/package/react-player) на своем веб-сайте для воспроизведения песен из Soundcloud и YouTube. На рабочем столе плеер работает потрясающе.

Однако на мобильном телефоне (iOS) при первом нажатии кнопки воспроизведения для песни это работает, но затем, когда я нажимаю кнопку воспроизведения для другой песни, требуется, чтобы я нажал ее дважды.

Есть ли способ обойти эту проблему? Любая помощь будет принята с благодарностью!

Вот ссылка на мой сайт: http://rockwiththis-staging.com/

Вот код для моего игрока:

render() {
    const activeSong = this.props.activeSong
    const url = activeSong.soundcloud_track_id ? `https%3A//api.soundcloud.com/tracks/${activeSong.soundcloud_track_id}` : activeSong.youtube_link
    return (
        <div className='iframe-and-youtube-wrapper'>
            <ReactPlayer
                playing={this.props.isPlaying}
                onReady={this.setSongDuration}
                onProgress={this.props.actions.setSongProgress}
                onEnded={this.props.changeSongOnEnd}
                url={url}
                ref={(e) => {
                  this.player = e;
                }}
                config={{
                  file: {
                    attributes: { autoPlay: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream }
                  }
                }}
            />
        </div>
    )
}