React Player rendering empty div

Current Behavior

My video component looks like this:

// https://github.com/cookpete/react-player/issues/1428
import dynamic from 'next/dynamic'
const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false })

export default function Video({src}) {
  return <ReactPlayer src={src} />
}

I use it like this:

<Video src="https://www.youtube.com/watch?v=grHP-de1p-U" />

Instead of seeing the video rendered on my page, I’m getting a blank div, in my dev tools I see:

<div src="https://www.youtube.com/watch?v=grHP-de1p-U" style="width: 640px; height: 360px;"></div>

Expected Behavior

See the video rendered on my page.

Environment

• URL attempting to play: https://www.youtube.com/watch?v=grHP-de1p-U
• Browser: Any.
• Operating system: OSX

[daniele-sarnari-blinkoo]

I could be wrong but the supplied example uses src, not url when defined in React Player

Does the following work?

// https://github.com/cookpete/react-player/issues/1428
import dynamic from 'next/dynamic'
const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false })

export default function Video({src}) {
  return <ReactPlayer url={src} />
}

I am experiencing an empty src in my video tag similar to @daniele-sarnari-blinkoo when trying to use a local file but all remote URLs appear to be working correctly (I’m using 2.11.0)

I always used url property. In my case the problem was React Strict Mode https://reactjs.org/docs/strict-mode.html.

[daniele-sarnari-blinkoo]

Similar problem with 2.11.0 version 2.10.1 is working