Added host-option to embed youtube from 'nocookie'-domain

README.md

@@ -63,6 +63,7 @@ As of Chrome 66, [videos must be `muted` in order to play automatically](https:/
 Prop | Description | Default
 ---- | ----------- | -------
 `url` | The url of a video or song to play<br/>&nbsp; ◦ &nbsp;Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object
+`host` | For YouTube, the host can be changed to embed from alternate sites. Can be set to `https://www.youtube-nocookie.com` or `https://www.youtube.com` | `https://www.youtube.com`
 `playing` | Set to `true` or `false` to pause or play the media | `false`
 `loop` | Set to `true` or `false` to loop the media | `false`
 `controls` | Set to `true` or `false` to display native player controls<br />&nbsp; ◦ &nbsp;Vimeo, Twitch and Wistia player will always display controls | `false`

src/demo/App.js

@@ -21,6 +21,7 @@ const MULTIPLE_SOURCES = [
 class App extends Component {
   state = {
     url: null,
+    host: null,
     pip: false,
     playing: true,
     volume: 0.8,
@@ -115,7 +116,7 @@ class App extends Component {
     this.player = player
   }
   render () {
-    const { url, playing, volume, muted, loop, played, loaded, duration, playbackRate, pip } = this.state
+    const { url, host, playing, volume, muted, loop, played, loaded, duration, playbackRate, pip } = this.state
     const SEPARATOR = ' · '
 
     return (
@@ -129,6 +130,7 @@ class App extends Component {
               width='100%'
               height='100%'
               url={url}
+              host={host}
               pip={pip}
               playing={playing}
               loop={loop}
@@ -299,6 +301,13 @@ class App extends Component {
                 <button onClick={() => this.setState({ url: this.urlInput.value })}>Load</button>
               </td>
             </tr>
+            <tr>
+              <th>Host (Youtube Only)</th>
+              <td>
+                <input ref={input => { this.hostInput = input }} type='text' placeholder='Enter URL' />
+                <button onClick={() => this.setState({ host: this.hostInput.value })}>Load</button>
+              </td>
+            </tr>
           </tbody></table>
 
           <h2>State</h2>
@@ -310,6 +319,12 @@ class App extends Component {
                 {(url instanceof Array ? 'Multiple' : url) || 'null'}
               </td>
             </tr>
+            <tr>
+              <th>host</th>
+              <td className={!host ? 'faded' : ''}>
+                {(host instanceof Array ? 'Multiple' : host) || 'null'}
+              </td>
+            </tr>
             <tr>
               <th>playing</th>
               <td>{playing ? 'true' : 'false'}</td>

src/players/YouTube.js

@@ -55,6 +55,7 @@ export class YouTube extends Component {
           ...parsePlaylist(url),
           ...playerVars
         },
+        host: this.props.host,
         events: {
           onReady: this.props.onReady,
           onStateChange: this.onStateChange,