Fixed Video Z-Index fighting

public/page/about/AboutPage.jsx

@@ -54,7 +54,9 @@ const AboutPage = (props) => {
           <SplitSection>
             <Split className="u-text-center">
               <Video
-                image={ require('./../../images/patterns/arcade.svg') }
+                image={ require('./../../videos/about/programming/programming.png') }
+                mp4={ require('./../../videos/about/programming/programming.mp4') }
+                controls
               />
             </Split>
 

public/styles/objects/_video.scss

@@ -19,14 +19,17 @@
   object-fit:cover;
 }
 
-$o-video__loader-z: 1;
 $o-video__fallback-z: 0;
+$o-video__video-z: 1;
+$o-video__loader-z: 2;
 
 .o-video {
   position: relative;
 
   &__video {
     width: 100%;
+    position: relative;//Needed by some browser to allow the Z-Index to apply
+    z-index: $o-video__video-z;
 
     &.is-full {
       @extend %o-video__media-cover;

public/video/Video.jsx

@@ -69,7 +69,6 @@ export default class Video extends React.Component {
 
   //React Render
   render() {
-    //TODO: Add image fallback support.
     //TODO: Add state support, as well as functional controls.
 
     //Sources