style the video player

src/components/VideoPlayer.js

@@ -1,25 +1,19 @@
 import React from 'react';
-import Grid from 'react-css-grid';
 import PropTypes from 'prop-types';
-import { getVideo } from '../utils/video';
-
+import {getVideo} from '../utils/video';
+import { Player } from 'video-react';
 class VideoPlayer extends React.Component {
   render() {
 
     return (
-      <Grid width={450}
-            gap={16}>
-        <section>
-          <h2>{ this.props.title }</h2>
-          <video src={ getVideo(this.props.id) } controls>
-          </video>
-          <h3>date { this.props.date } </h3>
-        </section>
-        <section className="text-left">
-          <p>{ this.props.description }</p>
-        </section>
+      <section>
+        <Player  src={getVideo(this.props.id)} controls>
+        </Player>
+        <h2 className='video-player-title'>{this.props.title}</h2>
+        <h3 className="video-player-date text-left">date {this.props.date} </h3>
+        <p className="text-left">{this.props.description}</p>
+      </section>
 
-      </Grid>
     )
   }
 }
@@ -30,4 +24,5 @@ VideoPlayer.propTypes = {
   description: PropTypes.string
 };
 
+
 export default VideoPlayer;

src/stylesheets/style.scss

@@ -5,4 +5,6 @@
 @import "search";
 @import "random-item";
 @import "video-item";
+@import "video-player";
 @import "footer";
+@import "~video-react/styles/scss/video-react";

src/stylesheets/video-player.scss

@@ -1 +1,20 @@
 @import "variables";
+
+video{
+  margin-top: 3em;
+}
+.video-player-title
+{
+  text-align: left;
+  padding: 1em 1em 0 1em;
+  background: $light-gray-color;
+  margin-top: 1em;
+}
+.video-player-date{
+  padding: 1em;
+  background: $light-gray-color;
+  text-align: left;
+}
+.video-react{
+  margin-top: 3em;
+}