From d573310e0748297b07bea85dc7a03f38935ccd21 Mon Sep 17 00:00:00 2001
From: Matt Derrick <git@mattderrick.co.uk>
Date: Sun, 17 Jul 2016 10:30:21 +0100
Subject: [PATCH] #38 Append custom classname to video element

---
 demo/src/components/index/main/Main.js | 9 ++++++++-
 src/components/video/Video.js          | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/demo/src/components/index/main/Main.js b/demo/src/components/index/main/Main.js
index 526295b..a83debb 100644
--- a/demo/src/components/index/main/Main.js
+++ b/demo/src/components/index/main/Main.js
@@ -87,7 +87,14 @@ var Main = React.createClass({
                     <span className="main__react-logo"></span> React HTML5 Video
                 </h1>
                 <div className="main__video">
-                    <Video controls autoPlay loop muted ref="video" onProgress={this.onProgress}>
+                    <Video
+                        className="custom-class"
+                        controls
+                        autoPlay
+                        loop
+                        muted
+                        ref="video"
+                        onProgress={this.onProgress}>
                         <source src={videos[this.state.videoId]} type="video/mp4" />
                         <Overlay />
                         <Controls />
diff --git a/src/components/video/Video.js b/src/components/video/Video.js
index 18cf1a5..26b8c0a 100644
--- a/src/components/video/Video.js
+++ b/src/components/video/Video.js
@@ -41,6 +41,7 @@ var Video = React.createClass({
         // Non-standard props
         copyKeys: React.PropTypes.object,
         children: React.PropTypes.node,
+        className: React.PropTypes.string,
 
         // HTML5 Video standard attributes
         autoPlay: React.PropTypes.bool,
@@ -291,6 +292,7 @@ var Video = React.createClass({
      * @return {string} Class string
      */
     getVideoClassName() {
+        var {className} = this.props;
         var classString = 'video';
 
         if (this.state.error) {
@@ -306,6 +308,9 @@ var Video = React.createClass({
         if (this.state.focused) {
             classString += ' video--focused';
         }
+        if (className) {
+            classString += ' ' + className;
+        }
         return classString;
     },