#38 Append custom classname to video element

Author: mderrick

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 />

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;
     },