From d8df671478105165ca396716a4c8328bc78a70c1 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 11 Apr 2017 18:26:37 +0100
Subject: [PATCH] Apply all non-valid props to the wrapper element

Fixes https://github.com/CookPete/react-player/issues/167
---
 README.md          | 2 --
 package.json       | 1 +
 src/ReactPlayer.js | 6 ++++--
 src/props.js       | 2 --
 yarn.lock          | 4 ++++
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index f1a115aa..673357cb 100644
--- a/README.md
+++ b/README.md
@@ -83,8 +83,6 @@ Prop | Description | Default
 `playbackRate` | Sets the playback rate of the appropriate player | `1`
 `width` | Sets the width of the player | `640`
 `height` | Sets the height of the player | `360`
-`hidden` | Set to `true` to hide the player | `false`
-`className` | Pass in a `className` to set on the root element
 `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element
 `progressFrequency` | The time between `onProgress` callbacks, in milliseconds | `1000`
 `playsinline` | Applies the `playsinline` attribute where supported | `false`
diff --git a/package.json b/package.json
index 55008537..5d9f11f3 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
   "dependencies": {
     "fetch-jsonp": "^1.0.2",
     "load-script": "^1.0.0",
+    "lodash.omit": "^4.5.0",
     "prop-types": "^15.5.6",
     "query-string": "^4.2.3"
   },
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 7cbed6d4..14d9d41b 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import omit from 'lodash.omit'
 
 import { propTypes, defaultProps } from './props'
 import YouTube from './players/YouTube'
@@ -123,10 +124,11 @@ export default class ReactPlayer extends Component {
     )
   }
   render () {
-    const { style, width, height, className, hidden } = this.props
+    const { style, width, height } = this.props
+    const otherProps = omit(this.props, Object.keys(propTypes))
     const players = this.renderPlayers()
     return (
-      <div style={{ ...style, width, height }} className={className} hidden={hidden}>
+      <div style={{ ...style, width, height }} {...otherProps}>
         {players}
       </div>
     )
diff --git a/src/props.js b/src/props.js
index 97dfdec6..26aa68f5 100644
--- a/src/props.js
+++ b/src/props.js
@@ -11,8 +11,6 @@ export const propTypes = {
   playbackRate: number,
   width: oneOfType([ string, number ]),
   height: oneOfType([ string, number ]),
-  hidden: bool,
-  className: string,
   style: object,
   progressFrequency: number,
   playsinline: bool,
diff --git a/yarn.lock b/yarn.lock
index 42f9a83e..ae07b1a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3345,6 +3345,10 @@ lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"