fix(www): Eliminate horizontal scroll on mobile devices (#18892)

* fix(www): Make egghead iframe videos responsive (eliminate horizontal scroll on mobile) * fix: Eliminate linter/prettier errors * refactor: wrap useCallback around settIframeWidth function * fix: use VIDEO_RATIO variable instead of magic number * Update www/src/components/shared/egghead-embed.js Co-Authored-By: Sidhartha Chatterjee <me@sidharthachatterjee.com> * chore: format
gatsbyjs · Oct 28, 2019 · 03adde1 · 03adde1
1 parent eb8f36b
commit 03adde1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/www/src/components/shared/egghead-embed.js b/www/src/components/shared/egghead-embed.js
@@ -1,25 +1,47 @@
-import React, { Fragment } from "react"
+import React, { useRef, useState, useCallback, useLayoutEffect } from "react"
 import PropTypes from "prop-types"
 
-const EggheadEmbed = ({ lessonLink, lessonTitle }) => (
-  <Fragment>
-    <iframe
-      className="egghead-video"
-      width={600}
-      height={348}
-      src={`${lessonLink}/embed`}
-      title={`Video: ${lessonTitle}`}
-      allowFullScreen
-    />
-
-    <p>
-      <em>
-        Video hosted on <a href={lessonLink}>egghead.io</a>
-      </em>
-      .
-    </p>
-  </Fragment>
-)
+const VIDEO_RATIO = 9 / 16
+
+const EggheadEmbed = ({ lessonLink, lessonTitle }) => {
+  const [iframeWidth, setIframeWidth] = useState(0)
+  const iframeRef = useRef()
+
+  const handleResize = useCallback(
+    () => setIframeWidth(iframeRef.current.clientWidth),
+    [iframeRef.current]
+  )
+
+  useLayoutEffect(() => {
+    handleResize()
+    window.addEventListener(`resize`, handleResize)
+
+    return () => {
+      window.removeEventListener(`resize`, handleResize)
+    }
+  }, [iframeRef.current])
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        className="egghead-video"
+        width={600}
+        height={iframeWidth * VIDEO_RATIO}
+        src={`${lessonLink}/embed`}
+        title={`Video: ${lessonTitle}`}
+        allowFullScreen
+      />
+
+      <p>
+        <em>
+          Video hosted on <a href={lessonLink}>egghead.io</a>
+        </em>
+        .
+      </p>
+    </>
+  )
+}
 
 EggheadEmbed.propTypes = {
   lessonLink: PropTypes.string.isRequired,

diff --git a/www/src/utils/styles/global.js b/www/src/utils/styles/global.js
@@ -339,6 +339,7 @@ export const globalStyles = t => {
     },
     ".egghead-video": {
       border: `none`,
+      "max-width": `100%`,
     },
     // Fancy external links in posts, borrowed from
     // https://github.com/comfusion/after-dark/