Improved styling for media/videos in detailed status view

app/assets/javascripts/components/components/video_player.jsx

@@ -4,7 +4,16 @@ import IconButton         from './icon_button';
 
 const VideoPlayer = React.createClass({
   propTypes: {
-    media: ImmutablePropTypes.map.isRequired
+    media: ImmutablePropTypes.map.isRequired,
+    width: React.PropTypes.number,
+    height: React.PropTypes.number
+  },
+
+  getDefaultProps () {
+    return {
+      width: 196,
+      height: 110
+    };
   },
 
   getInitialState () {
@@ -21,7 +30,7 @@ const VideoPlayer = React.createClass({
 
   render () {
     return (
-      <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000', position: 'relative' }}>
+      <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${this.props.width}px`, height: `${this.props.height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
         <div style={{ position: 'absolute', top: '10px', left: '10px', opacity: '0.8' }}><IconButton title='Toggle sound' icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
         <video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={{ width: '100%', height: '100%' }} />
       </div>