translations always show over video

src/components/Overlay/Content.js

@@ -5,7 +5,7 @@ import Md from './Md'
 import Spinner from '../presentational/Spinner'
 import NoSource from '../presentational/NoSource'
 
-export default ({ media, viewIdx }) => {
+export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
   const el = document.querySelector(`.source-media-gallery`)
   const shiftW = el ? el.getBoundingClientRect().width : 0
 
@@ -26,6 +26,15 @@ export default ({ media, viewIdx }) => {
       case 'Video':
         return (
           <div className='media-player'>
+            <div className='banner-trans right-overlay'>
+              {translations ? translations.map((trans, idx) => (
+                langIdx !== idx + 1 ? (
+                  <div className='trans-button' onClick={() => switchLanguage(idx + 1)}>{trans.code}</div>
+                ) : (
+                  <div className='trans-button' onClick={() => switchLanguage(0)}>EN</div>
+                )
+              )) : null}
+            </div>
             <Player
               poster={poster}
               className='source-video'

src/components/Overlay/Media.js

@@ -49,19 +49,16 @@ class SourceOverlay extends React.Component {
 
           <h3 className='mo-banner-content'>{shortenedTitle}</h3>
 
-          <div className='banner-trans'>
-            {this.props.translations ? this.props.translations.map((trans, idx) => (
-              this.state.langIdx !== idx + 1 ? (
-                <div className='trans-button' onClick={() => this.switchLanguage(idx + 1)}>{trans.code}</div>
-              ) : (
-                <div className='trans-button' onClick={() => this.switchLanguage(0)}>EN</div>
-              )
-            )) : null}
-          </div>
         </div>
         <div className='mo-container' onClick={e => e.stopPropagation()}>
           <div className='mo-media-container'>
-            <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.mediaIdx} />
+            <Content
+              switchLanguage={(lang) => this.switchLanguage(lang)}
+              translations={this.props.translations}
+              langIdx={this.state.langIdx}
+              media={paths.map(p => selectTypeFromPathWithPoster(p, poster))}
+              viewIdx={this.state.mediaIdx}
+            />
           </div>
         </div>
 

src/scss/overlay.scss

@@ -42,14 +42,14 @@ $overlay-bg: rgba(239,239,239,0.9);
   top: 0;
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: stretch;
   flex-direction: row;
 
   .mo-banner-close {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    position: fixed;
+    top: 20px;
+    left: 20px;
     min-width: $banner-height;
     width: $banner-height;
     .material-icons {
@@ -74,13 +74,11 @@ $overlay-bg: rgba(239,239,239,0.9);
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: $banner-height; // to offset the 2*$banner-height below
     &.h3 {
       border-radius: 2px;
       padding: 10px 15px;
       background-color: transparent;
       color: $overlay-bg;
-      margin-left: -$banner-height;
     }
   }
 }
@@ -326,7 +324,10 @@ $overlay-bg: rgba(239,239,239,0.9);
   min-width: 100%;
   height: 100%;
   min-height: 100%;
-  align-self: center;
+  display: block;
+  // align-self: center;
+  // display: flex;
+  // flex-direction: column;
 }
 
 .source-image, .source-video {