vimeo embed

components/VimeoEmbed.js

@@ -0,0 +1,27 @@
+export default ({ id }) => {
+  return (
+    <div
+      className="video full-width"
+      style={{
+        position: "relative",
+        paddingBottom: "56.25%" /* 16:9 */,
+        paddingTop: 0.25,
+        height: 0,
+      }}
+    >
+      <iframe
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }}
+        src={`https://player.vimeo.com/video/${id}?h=329838e33e&title=0&byline=0&portrait=0`}
+        frameBorder="0"
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+};

lib/googledoc.js

@@ -3,6 +3,7 @@ import cheerio from "cheerio";
 import { renderToString } from "react-dom/server";
 import XMLToReact from "@condenast/xml-to-react";
 import YouTubeEmbed from "../components/YouTubeEmbed";
+import VimeoEmbed from "../components/VimeoEmbed";
 import LoomEmbed from "../components/LoomEmbed";
 import TwitterEmbed from "../components/TwitterEmbed";
 import RevueEmbed from "../components/RevueEmbed";
@@ -46,6 +47,11 @@ function cleanHTML(html) {
         /<a [^>]*>https?:\/\/(www\.)?(youtu.be\/|youtube.com\/(embed\/|watch\?v=))([a-z0-9_-]{11})[^<]*<\/a>/gi,
         (match, p1, p2, p3, p4) => `<YouTube id="${p4}" />`
       )
+      // Vimeo embeds
+      .replace(
+        /<a [^>]*>https?:\/\/(www\.)?vimeo.com\/([0-9]+)[^<]*<\/a>/gi,
+        (match, p1, p2, p3, p4) => `<Vimeo id="${p2}" />`
+      )
       // Loom embeds
       .replace(
         /<a [^>]*>https?:\/\/(www\.)?loom\.com\/(embed|share)\/([a-z0-9_-]{32})[^<]*<\/a>/gi,
@@ -262,6 +268,7 @@ function convertDomToReactTree(xml, classes) {
       props: { label: attrs.label, href: attrs.href, primary: attrs.primary },
     }),
     YouTube: (attrs) => ({ type: YouTubeEmbed, props: { id: attrs.id } }),
+    Vimeo: (attrs) => ({ type: VimeoEmbed, props: { id: attrs.id } }),
     Loom: (attrs) => ({ type: LoomEmbed, props: { id: attrs.id } }),
     airtable: (attrs) => ({
       type: "airtable",