From 882dbe5d383f92a914e925ecc03076511483c966 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Thu, 24 Dec 2015 15:10:37 +0000
Subject: [PATCH] Enable multiple YouTube players

Fixes https://github.com/CookPete/react-player/issues/15 and supersedes https://github.com/CookPete/react-player/pull/16
---
 CHANGELOG.md           | 1 +
 src/players/YouTube.js | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e75e6da..8cc6d070 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Unreleased
 
+* Enable [multiple YouTube players](https://github.com/CookPete/react-player/issues/15)
 * Fix [YouTube and Vimeo autoplay bug](https://github.com/CookPete/react-player/issues/7)
 * [Full commit list](https://github.com/CookPete/react-player/compare/v0.2.1...master)
 
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index 49c24de0..7a2cbda7 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -15,12 +15,15 @@ const DEFAULT_PLAYER_VARS = {
   showinfo: 0
 }
 
+let count = 0
+
 export default class YouTube extends Base {
   static propTypes = propTypes
   static defaultProps = defaultProps
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
+  playerId = PLAYER_ID + '-' + count++
   componentDidMount () {
     if (!this.props.url && this.props.youtubeConfig.preload) {
       this.preloading = true
@@ -33,7 +36,9 @@ export default class YouTube extends Base {
       return Promise.resolve(window[SDK_GLOBAL])
     }
     return new Promise((resolve, reject) => {
+      const previousOnReady = window.onYouTubeIframeAPIReady
       window.onYouTubeIframeAPIReady = function () {
+        if (previousOnReady) previousOnReady()
         resolve(window[SDK_GLOBAL])
       }
       loadScript(SDK_URL, err => {
@@ -53,7 +58,7 @@ export default class YouTube extends Base {
       return
     }
     this.getSDK().then(YT => {
-      this.player = new YT.Player(PLAYER_ID, {
+      this.player = new YT.Player(this.playerId, {
         width: '100%',
         height: '100%',
         videoId: id,
@@ -103,6 +108,6 @@ export default class YouTube extends Base {
   }
   render () {
     const style = { display: this.props.url ? 'block' : 'none' }
-    return <div id={PLAYER_ID} style={style} />
+    return <div id={this.playerId} style={style} />
   }
 }