Merge pull request #29 from vev-design/e-233-video-black-bar-shows-on-initial-load

Set styles in css instead of injecting with useEffect

Author: vevsindre

video/src/Video.module.css

@@ -10,6 +10,10 @@
   width: 100%;
   height: 100%;
   filter: none;
+  object-fit: contain;
+  &.fill {
+    object-fit: cover;
+  }
 }
 
 .ie .video {

video/src/Video.tsx

@@ -181,11 +181,9 @@ const Video = ({
   if (isIE()) attributes.className = 'ie';
   if (autoplay) attributes.autoPlay = true;
 
-  useEffect(() => {
-    const videoEl = videoRef.current;
-    if (!videoEl) return;
-    videoEl.style.objectFit = fill ? 'cover' : 'contain';
-  }, [fill, videoRef.current]);
+  let videoCl = styles.video;
+  if (fill) videoCl += ' ' + styles.fill;
+
 
   return (
     <div className={styles.wrapper}>
@@ -200,7 +198,7 @@ const Video = ({
         aria-label={video?.name || ''}
         playsInline
         disableRemotePlayback
-        className={styles.video}
+        className={videoCl}
         poster={thumbnail && thumbnail.url ? thumbnail.url : video && video.thumbnail}
         preload={preload}
         {...attributes}