use padding-bottom trick to make giphy mp4s responsive (#3024)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/stream/common/Media/GiphyMedia.css

@@ -0,0 +1,15 @@
+.responsiveVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.responsiveContainer {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}

src/core/client/stream/common/Media/GiphyMedia.tsx

@@ -1,5 +1,8 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
+import styles from "./GiphyMedia.css";
+
 interface Props {
   url: string;
   width?: number | null;
@@ -8,6 +11,10 @@ interface Props {
   title?: string | null;
 }
 
+function calculateBottomPadding(width: number, height: number) {
+  return `${(height / width) * 100}%`;
+}
+
 const GiphyMedia: FunctionComponent<Props> = ({
   url,
   title,
@@ -15,15 +22,30 @@ const GiphyMedia: FunctionComponent<Props> = ({
   width,
   height,
 }) => {
+  const paddingBottom =
+    width && height ? calculateBottomPadding(width, height) : null;
   return video ? (
-    <video
-      width={width || undefined}
-      height={height || undefined}
-      autoPlay
-      loop
-    >
-      <source src={video} type="video/mp4" />
-    </video>
+    <div style={{ maxWidth: `${width}px` }}>
+      <div
+        className={cn({
+          [styles.responsiveContainer]: paddingBottom,
+        })}
+        style={paddingBottom ? { paddingBottom, maxWidth: `${width}px` } : {}}
+      >
+        <video
+          className={cn({
+            [styles.responsiveVideo]: paddingBottom,
+          })}
+          width={width || undefined}
+          height={height || undefined}
+          autoPlay
+          loop
+          playsInline
+        >
+          <source src={video} type="video/mp4" />
+        </video>
+      </div>
+    </div>
   ) : (
     <img src={url} alt={title || ""} />
   );