diff --git a/video/src/Video.module.css b/video/src/Video.module.css
index 7346eec..ff5ec1d 100644
--- a/video/src/Video.module.css
+++ b/video/src/Video.module.css
@@ -10,6 +10,10 @@
   width: 100%;
   height: 100%;
   filter: none;
+  object-fit: contain;
+  &.fill {
+    object-fit: cover;
+  }
 }
 
 .ie .video {
diff --git a/video/src/Video.tsx b/video/src/Video.tsx
index aea8384..f5295c3 100644
--- a/video/src/Video.tsx
+++ b/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}