more responsive video sizing

4 files changed, 32 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index a048fa1..d5fd46c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import VimeoPlayer from '@u-wave/react-vimeo'
+import VimeoPlayer from 'app/utils/vendor/vimeo'
 
 export const FullscreenVideo = ({ element, media, transitionDuration }) => {
   const { color } = element
@@ -17,11 +17,11 @@ export const FullscreenVideo = ({ element, media, transitionDuration }) => {
     >
       <VimeoPlayer
         video={item.url}
-        autoplay muted
+        autoplay={true}
+        muted={true}
+        responsive={true}
         controls={false}
         byline={false}
-        width={window.innerWidth}
-        height={window.innerHeight}
       />
     </div>
   )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 7165baa..039b2dd 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
-import VimeoPlayer from '@u-wave/react-vimeo'
+import VimeoPlayer from 'app/utils/vendor/vimeo'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { SpeakerIcon } from '../../nav/viewer.icons'
 import { MediaCitation } from '../components.media'
 
-export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationClick }) => {
   if (!media.lookup) return <div />
   // const { color } = element
   const className = currentParagraph ? 'media video current' : 'media video'
@@ -29,11 +29,10 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
         <VimeoPlayer
           video={item.url}
           autoplay={annotation.settings.autoplay}
-          muted
+          muted={true}
+          responsive={true}
           controls={false}
           byline={false}
-          width={width}
-          height={height}
         />
       </div>
       <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 263083b..c8c897c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -53,10 +53,27 @@
   background-repeat: no-repeat;
   background-position: center center;
 }
+
+/* video */
+
 .viewer-fullscreen .video {
   pointer-events: none;
+  align-items: flex-start;
 }
 
 iframe {
   pointer-events: none;
-}
\ No newline at end of file
+}
+
+.viewer-fullscreen .video > div {
+  pointer-events: none;
+  width: 100%;
+  height: calc(100vh) !important;
+  padding: 0 0 3rem 0
+}
+
+.viewer-fullscreen .video > div div {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index b23b7d0..09257c2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -188,8 +188,14 @@
 }
 .player-transcript .media.video .videoPlayer {
   pointer-events: none;
+  width: 100%;
+  height: calc(100vh - 15rem) !important;
   padding: 1rem 0;
 }
+.player-transcript .media.video .videoPlayer div {
+  height: 100%;
+  padding: 0 !important;
+}
 .player-transcript .media.image .speaker-icon {
   bottom: 0;
   right: 0;