From 35f3e0ceb1656524bcf37f1ab89cc33a68a7cdb5 Mon Sep 17 00:00:00 2001
From: Stefan Kraus <stefan.kraus@workiva.com>
Date: Sat, 7 Mar 2020 12:17:30 -0600
Subject: [PATCH] youtube-video (#20)

* youtube-video

* remove auto-pause
---
 package.json                |  1 +
 src/templates/index-page.js | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/package.json b/package.json
index 03da475..1f13d83 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-helmet": "^5.2.0",
+    "react-youtube": "^7.9.0",
     "redux": "^3.7.2",
     "typeface-roboto-condensed": "0.0.75",
     "typescript": "^3.8.3",
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 792a302..600c1d2 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import YouTube from 'react-youtube'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 
@@ -6,6 +7,12 @@ import Layout from '../components/Layout'
 import Features from '../components/Features'
 import BlogRoll from '../components/BlogRoll'
 
+const opts = {
+	height: '480',
+	width: '',
+	playerVars: {autoplay: 1}
+};
+
 export const IndexPageTemplate = ({
   image,
   title,
@@ -77,6 +84,11 @@ export const IndexPageTemplate = ({
                   <div className="tile">
                     <h3 className="subtitle">{mainpitch.description}</h3>
                   </div>
+									<YouTube
+									  className="column is-12"
+									  videoId="_CFDuLiHXuc"
+										opts={opts}
+									/>
                 </div>
                 <div className="columns">
                   <div className="column is-12">