use video-react

src/components/SourceOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Img from 'react-image'
-import { Media, Player, controls } from 'react-media-player'
+import { Player } from 'video-react'
 import Spinner from './presentational/Spinner'
 import NoSource from './presentational/NoSource'
 
@@ -19,17 +19,12 @@ class SourceOverlay extends React.Component {
 
   renderVideo() {
     return (
-      <Media>
-        <div className="media">
-          <div className="media-player">
-            <Player src={`${this.props.source.path}.mp4`} />
-          </div>
-          <div className="media-controls">
-            <controls.PlayPause/>
-            <controls.MuteUnmute/>
-          </div>
-        </div>
-      </Media>
+      <div className="media-player">
+        <Player
+          playsInline
+          src={`${this.props.source.path}.mp4`}
+        />
+      </div>
     )
   }
 

src/scss/main.scss

@@ -15,3 +15,4 @@
 @import 'infopopup';
 @import 'notification';
 @import 'scene';
+@import 'mediaplayer';

src/scss/mediaoverlay.scss

@@ -1,5 +1,5 @@
 $panel-width: 800px;
-$panel-height: 800px;
+$panel-height: 700px;
 $vimeo-width: $panel-width - 100;
 $vimeo-height: $panel-height / 2;
 
@@ -61,11 +61,12 @@ $header-inset: 10px;
     flex: 1;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 }
 
 .mo-media-container {
-  padding-top: 3*$header-inset;
+  // padding-top: 3*$header-inset;
   font-family: "Lato", Helvetica, sans-serif;
   // max-height: $vimeo-height;
   min-width: 100%;

src/scss/mediaplayer.scss

@@ -0,0 +1 @@
+@import '~video-react/styles/scss/video-react';