Improving Video Section

public/section/video/VideoSection.jsx

@@ -35,7 +35,8 @@ class VideoSection extends React.Component {
       <Section full={this.props.full} className="c-video-section">
         <Video
           className="c-video-section__video"
-          sources={ this.props.sources ? this.props.sources : this.props }
+          autoPlay
+          loop
         />
 
         { this.props.children }

public/styles/index.scss

@@ -52,6 +52,7 @@
 
 @import './objects/_app.scss';
 @import './objects/_navbar.scss';
+@import './objects/_video.scss';
 
 //Components
 @import './components/_page.scss';

public/styles/objects/_video.scss

@@ -0,0 +1,18 @@
+/*
+ *  Video
+ *    Video Object, with general fallbacks and smarter controls for better
+ *    cross-browser compatibility.
+ *    
+ *    Also allows for better and more styled controls.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
+.o-video {
+
+  &__video {
+
+  }
+}

public/video/Video.jsx

@@ -36,6 +36,7 @@ class Video extends React.Component {
 
   render() {
     //TODO: Add image fallback support.
+    //TODO: Add state support, as well as functional controls.
     let sources = [];
     let sourceProps = this.props.sources ? this.props.sources : this.props;
 
@@ -47,11 +48,25 @@ class Video extends React.Component {
 
     let clazz = "o-video";
     if(this.props.className) clazz += " " + this.props.className;
+    if(sourceProps.image) clazz += " has-image";
+    if(sourceProps.gif) clazz += " has-gif";
+    if(this.props.autoplay) clazz += " is-autoplaying";
+    if(this.props.loop) clazz += " is-looping";
 
     return (
-      <video className={clazz}>
+      <div class={clazz}>
+        { /* Video Element (And sources) */ }
+        <video className="o-video__video" autoPlay={this.props.autoPlay} loop={this.props.loop} >
           { sources }
         </video>
+
+        { /* Fallback Picture */ }
+        {
+          if(sourceProps.image) {
+            <img src={sourceProps.image} className="o-video__image" />
+          }
+        }
+      </div>
     );
   }
 }