Wistia playback in react-player causes error "The XMLHttpRequeset constructor has been tampered with"

Question

I have a ReactPlayer embded like so:

<ReactPlayer
          ref={this.ref}
          className="storyPlayer__reactPlayer"
          width="100%"
          height="100%"
          url="https://getleda.wistia.com/medias/bjz07hdxqx"
          playing
          onReady={() => {
            this.setState({ ready: true });
          }}
          onProgress={this.onProgress}
        />

Where the url is pointing at wistia obviously, I get the following error in the console and the player does not work:

judy The XMLHttpRequest constructor has been tampered with. Because this affects CORS/Range XHR requests, HLS playback has been disabled. To enable HLS playback and other important features, please remove code that changes the definition of window.XMLHttpRequest.

Any ideas what's causing this and how to fix?

Answer 1

Looks like the HLS issue was a redherring but if anyone is interested as to why I was getting it it's because of the routes configuration. For some reason it didn't like when the reactplayer was set up in a route such as /videoplayer, from the root it worked fine.

Upon further investigation the issue was actually quite simple, for whatever reason ReactPlayer doesn't know what '100%' width and height is for wistia videos, changing it to something like this:

  <ReactPlayer
          ref={this.ref}
          className="storyPlayer__reactPlayer"
          controls={true}
          **width="600px"
          height="600px"**
          url="https://getleda.wistia.com/medias/bjz07hdxqx"
          playing
          onReady={() => {
            this.setState({ ready: true });
          }}
          onProgress={this.onProgress}
        />

Fixed it.