Improving video sections.

public/page/home/Homepage.jsx

@@ -24,6 +24,7 @@
 import React from 'react';
 import Page from './../Page';
 import VideoSection from './../../section/video/VideoSection';
+import Section from './../../section/Section';
 
 class Homepage extends React.Component {
   constructor(props) {
@@ -36,6 +37,10 @@ class Homepage extends React.Component {
         <VideoSection full mp4={ require('./../../videos/about/programming/programming.mp4') }>
           Test
         </VideoSection>
+
+        <Section full>
+          Lorem
+        </Section>
       </Page>
     );
   }

public/section/video/VideoSection.jsx

@@ -37,6 +37,8 @@ class VideoSection extends React.Component {
           className="c-video-section__video"
           autoPlay
           loop
+          fill
+          sources={ this.props.sources ? this.props.sources : this.props }
         />
 
         { this.props.children }

public/styles/objects/_video.scss

@@ -11,8 +11,17 @@
  *    1.0.0 - 2018/05/07
  */
 .o-video {
+  position: relative;
 
   &__video {
 
+    &.is-full {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit:cover;
+    }
   }
 }

public/video/Video.jsx

@@ -23,9 +23,10 @@
 
 import React from 'react';
 
+//Adjust the order to adjust the load position
 const VALID_SOURCES = [
-  "mp4",
   "webm",
+  "mp4",
   "ogg"
 ]
 
@@ -37,6 +38,8 @@ class Video extends React.Component {
   render() {
     //TODO: Add image fallback support.
     //TODO: Add state support, as well as functional controls.
+
+    //Sources
     let sources = [];
     let sourceProps = this.props.sources ? this.props.sources : this.props;
 
@@ -46,6 +49,7 @@ class Video extends React.Component {
       sources.push(<source type={"video/"+s} src={sourceProps[s]} key={s} />);
     }
 
+    //Classes
     let clazz = "o-video";
     if(this.props.className) clazz += " " + this.props.className;
     if(sourceProps.image) clazz += " has-image";
@@ -53,19 +57,27 @@ class Video extends React.Component {
     if(this.props.autoplay) clazz += " is-autoplaying";
     if(this.props.loop) clazz += " is-looping";
 
+    let videoClass = "o-video__video";
+    if(this.props.fill) videoClass += " is-full";
+
+
+    //Fallback.
+    let fallback;
+
     return (
-      <div class={clazz}>
+      <div className={clazz}>
         { /* Video Element (And sources) */ }
-        <video className="o-video__video" autoPlay={this.props.autoPlay} loop={this.props.loop} >
+        <video
+          className={ videoClass }
+          autoPlay={this.props.autoPlay}
+          loop={this.props.loop}
+          controls={false /* Explicitly no controls */}
+        >
           { sources }
         </video>
 
         { /* Fallback Picture */ }
-        {
-          if(sourceProps.image) {
-            <img src={sourceProps.image} className="o-video__image" />
-          }
-        }
+        { fallback }
       </div>
     );
   }