React-player: Support for youtube-nocookie.com

[Betree]

Youtube provides a service to integrate a video without leaving a cookie if the user does not click on play. It simply use the form youtube-nocookie.com/embed/youtube_id.

I'd love to be able to do something like:

<ReactPlayer url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" config={{
    youtube: {
        noCookie: true
    }
}}/>

That would convert https://www.youtube.com/watch?v=dQw4w9WgXcQ to https://youtube-nocookie.com/embed/dQw4w9WgXcQ automatically.

However if you think this should be handled by a parent component, I'd like to be at least able to provide a youtube-nocookie url to ReactPlayer (which would be a 14 characters change in the code 😉).

Tell me which one you prefer so I can work on a PR.

Ps: You can check that this is legitimately owned by Google here: https://www.whois.com/whois/youtube-nocookie.com

[cookpete]

ReactPlayer uses the YouTube iFrame API to play videos. To support this, the API needs to support it. I can't find any documentation about a nocookie mode in the docs or the custom player params, so I'm not sure this can be done yet.

Adding to the youtube URL pattern wouldn't do much, because it's only used for the canPlay method and to parse the 11 character video ID.

[Betree]

Thanks for the response, it's indeed undocumented. But you can actually activate the option from Youtube's share menu, so I guess it's not deprecated:

What about implementing it as a new provider that would put the URL directly in a IFrame ?

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

[cookpete]

Yeah I don't think it's deprecated, but it's just not part of the iFrame API.

Unfortunately, it looks like you lose all events and interactions with the player in nocookie mode:

• https://groups.google.com/forum/#!topic/youtube-api-gdata/lscdyDrV0T0
• https://stackoverflow.com/questions/36480181/youtube-player-api-onready-not-firing-for-www-youtube-nocookie-com
• https://stackoverflow.com/questions/43128874/onready-not-firing-for-embedded-youtube-iframe
• https://stackoverflow.com/questions/21758040/youtube-iframe-api-onready-not-firing-for-chrome-extension

The only way ReactPlayer will be able to support this is if they add nocookie support to the iFrame API, to retain the existing methods and event hooks. Otherwise there is no point using ReactPlayer and you might as well just render <iframe src="https://www.youtube-nocookie.com/..." /> in React.

[Betree]

I definitely rely on ReactPlayer events and hooks so the iframe will not work for me.
Thanks for taking the time to check this. I'll follow the issues you have linked to see if there are any changes in the future.

[AlexandreKilian]

@Betree @CookPete there is actually a way, it's just not documented… I can make a pull-request right away :)

[cookpete]

In 1.9.0 I've added embedOptions to the youtube config that lets you pass in a custom host option:

<ReactPlayer
  url='...'
  config={{ 
    youtube: { 
      embedOptions: { 
        host: 'https://www.youtube-nocookie.com' 
      } 
    } 
  }}
/>

And override any other options in future, if you want to.

[hansmodo]

I notice that the demo app ( https://cookpete.com/react-player/ ) doesn't include support for the nocookie host. I saw the changes to demo/App.js committed with 1.9.0. Is the demo url just not using the latest code? I'm asking because I've not been able to get the new 'embedOptions' config to work and wanted to see a working version.

[AlexandreKilian]

@hansmodo the new solution doesn't have a top level prop for the embed Option, I assume that's why there isn't an option in the demo app… But I've tested it, it works

[mayank1112]

Doesnt work for me