From 1c4f9435b11fbbb99e24b72a2d957c4fa46fbb35 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Wed, 6 Jun 2018 08:06:38 +1000
Subject: [PATCH] Fixed Video Z-Index fighting

---
 public/page/about/AboutPage.jsx   | 4 +++-
 public/styles/objects/_video.scss | 5 ++++-
 public/video/Video.jsx            | 1 -
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/page/about/AboutPage.jsx b/public/page/about/AboutPage.jsx
index 033bf45..1e95c47 100644
--- a/public/page/about/AboutPage.jsx
+++ b/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>
 
diff --git a/public/styles/objects/_video.scss b/public/styles/objects/_video.scss
index 637a47d..6a86507 100644
--- a/public/styles/objects/_video.scss
+++ b/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;
diff --git a/public/video/Video.jsx b/public/video/Video.jsx
index e24e6e6..005a991 100644
--- a/public/video/Video.jsx
+++ b/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