displaying node videos

src/components/node/NodeVideoBlock/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useMemo } from 'react';
+import { INode } from '~/redux/types';
+import * as styles from './styles.scss';
+import path from 'ramda/es/path';
+
+interface IProps {
+  node: INode;
+}
+
+const NodeVideoBlock: FC<IProps> = ({ node }) => {
+  const video = useMemo(() => {
+    const url: string = path(['blocks', 0, 'url'], node);
+    const match =
+      url &&
+      url.match(
+        /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/
+      );
+
+    return match && match[1];
+  }, [node]);
+
+  return (
+    <div className={styles.wrap}>
+      <iframe
+        width="560"
+        height="315"
+        src={`https://www.youtube.com/embed/${video}`}
+        frameBorder="0"
+        allowFullScreen
+        title="video"
+      />
+    </div>
+  );
+};
+
+export { NodeVideoBlock };

src/components/node/NodeVideoBlock/styles.scss

@@ -0,0 +1,12 @@
+.wrap {
+  padding-bottom: 56.25%;
+  position: relative;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}