diff --git a/global.d.ts b/global.d.ts
index 9f63759..186d541 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -18,6 +18,7 @@ interface Tool {
   og_description: string | null;
   og_image_url: string | null;
   twitter_handle: string | null;
+  youtube_id: string | null;
   users_count: number;
   created_at: string | null;
   updated_at: string | null;
diff --git a/migrations/20190915154651_add_youtube_to_tools.js b/migrations/20190915154651_add_youtube_to_tools.js
new file mode 100644
index 0000000..94cb6e0
--- /dev/null
+++ b/migrations/20190915154651_add_youtube_to_tools.js
@@ -0,0 +1,11 @@
+exports.up = function(knex) {
+  return knex.schema.table("tools", function(table) {
+    table.string("youtube_id");
+  });
+};
+
+exports.down = function(knex) {
+  return knex.schema.table("tools", function(table) {
+    table.dropColumn("youtube_id");
+  });
+};
diff --git a/pages/api/graphql.ts b/pages/api/graphql.ts
index ba114a0..340f7fa 100644
--- a/pages/api/graphql.ts
+++ b/pages/api/graphql.ts
@@ -64,6 +64,7 @@ const typeDefs = gql`
     ogDescription: String
     ogImageUrl: String
     twitterHandle: String
+    youtubeId: String
     usersCount: Int!
     userTools(first: Int = 50, skip: Int = 0): [UserTool!]!
   }
@@ -268,6 +269,7 @@ const resolvers = {
     ogDescription: (tool: Tool, _args, _context) => tool.og_description,
     ogImageUrl: (tool: Tool, _args, _context) => tool.og_image_url,
     twitterHandle: (tool: Tool, _args, _context) => tool.twitter_handle,
+    youtubeId: (tool: Tool, _args, _context) => tool.youtube_id,
     usersCount: (tool: Tool, _args, _context) => tool.users_count,
     userTools: async (tool, args: PaginationArgs, _context) => {
       const first = between(1, 100, args.first);
diff --git a/pages/tools/[id]/index.tsx b/pages/tools/[id]/index.tsx
index 192ac55..6493002 100644
--- a/pages/tools/[id]/index.tsx
+++ b/pages/tools/[id]/index.tsx
@@ -3,6 +3,7 @@ import Head from "next/head";
 import { css } from "@emotion/core";
 import Link from "next/link";
 import { Layout } from "@components/Layout";
+import YouTube from "@components/YouTube";
 
 const ToolShowQuery = gql`
   query ToolShowData($id: ID!) {
@@ -14,6 +15,7 @@ const ToolShowQuery = gql`
       ogTitle
       ogDescription
       twitterHandle
+      youtubeId
       userTools(first: 50) {
         id
         user {
@@ -124,6 +126,16 @@ const Tool = ({ tool }) => {
           {tool.ogDescription && <p>{tool.ogDescription}</p>}
         </div>
 
+        {tool.youtubeId && (
+          <div
+            css={css`
+              margin: 2rem 0px;
+            `}
+          >
+            <YouTube id={tool.youtubeId} />
+          </div>
+        )}
+
         <div>
           <h2
             css={css`
diff --git a/src/components/YouTube.tsx b/src/components/YouTube.tsx
new file mode 100644
index 0000000..e4e22e0
--- /dev/null
+++ b/src/components/YouTube.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { css } from "@emotion/core";
+
+interface Props {
+  id: string;
+}
+
+const YouTube = ({ id }: Props) => (
+  <div
+    css={css`
+      position: relative;
+      padding-bottom: 56.25%;
+      height: 0;
+      overflow: hidden;
+      max-width: 100%;
+    `}
+  >
+    <iframe
+      css={css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      `}
+      src={`https://www.youtube.com/embed/${id}`}
+      allow="autoplay; encrypted-media"
+      title="Embedded YouTube video"
+    />
+  </div>
+);
+
+export default YouTube;