From a3c75b8d7402207e54d68f4d64293c411925259b Mon Sep 17 00:00:00 2001
From: Mark Moser <mark.moser@perficient.com>
Date: Wed, 23 Aug 2017 14:26:05 -0500
Subject: [PATCH] video player

---
 site/assets/scss/components/_styleguide.scss |  1 -
 site/assets/scss/elements/_video.scss        |  6 ++++++
 site/assets/scss/main.scss                   |  1 +
 site/data/videos.yml                         |  2 +-
 site/pages/index.hbs                         |  2 +-
 site/pages/video.hbs                         | 17 +++++++++++------
 6 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 site/assets/scss/elements/_video.scss

diff --git a/site/assets/scss/components/_styleguide.scss b/site/assets/scss/components/_styleguide.scss
index 4b24d4c..d5e8906 100644
--- a/site/assets/scss/components/_styleguide.scss
+++ b/site/assets/scss/components/_styleguide.scss
@@ -1,5 +1,4 @@
 
-
 .color-samples {
   > div {
     display: flex;
diff --git a/site/assets/scss/elements/_video.scss b/site/assets/scss/elements/_video.scss
new file mode 100644
index 0000000..169a71a
--- /dev/null
+++ b/site/assets/scss/elements/_video.scss
@@ -0,0 +1,6 @@
+video {
+  margin: $gutter 0;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}
diff --git a/site/assets/scss/main.scss b/site/assets/scss/main.scss
index 64123a6..d0c8ce4 100644
--- a/site/assets/scss/main.scss
+++ b/site/assets/scss/main.scss
@@ -13,6 +13,7 @@
 @import 'elements/icons';
 @import 'elements/cta';
 @import 'elements/footer';
+@import 'elements/video';
 
 @import 'components/styleguide';
 @import 'components/hero';
diff --git a/site/data/videos.yml b/site/data/videos.yml
index b407bdb..54e25b5 100644
--- a/site/data/videos.yml
+++ b/site/data/videos.yml
@@ -58,4 +58,4 @@ videos:
     width: "400"
     height: "262"
     poster: "BalloonTime_400x262.png"
-    role: "Prep / Shoot / Post"
+    note: "Just playing around with a new iPhone app."
diff --git a/site/pages/index.hbs b/site/pages/index.hbs
index 5caefa0..f980717 100644
--- a/site/pages/index.hbs
+++ b/site/pages/index.hbs
@@ -76,7 +76,7 @@
   <div>
     <h2>Browser Work</h2>
     <p>I know my way around on the browser side of things too. I can write semantic HTML with a focus on inclusive design, as well as build some great component based SCSS stylesheets.</p>
-    <p>Javascript is all the rage these days, and I've spent some time with React. I still use a Grunt based workflow while prototyping and building static sites, which is mainly due to lack of need to change.</p>
+    <p>I've spent some time with React and I use a Grunt based workflow while prototyping static sites, like this one.</p>
   </div>
   <div class="pie">
     <ul>
diff --git a/site/pages/video.hbs b/site/pages/video.hbs
index f67e29e..925cd21 100644
--- a/site/pages/video.hbs
+++ b/site/pages/video.hbs
@@ -7,10 +7,10 @@
 ---
 
 <section>
-  <p>Here is a collection of old video projects I'm still proud of. I no longer seek out video production projects because I decided to focus on development. I hope you enjoy watching them as much as I did making them.</p>
+  <p>Here is a collection of old video projects I'm still proud of. I no longer seek out work in video production in an effort to narrow focus. I hope you enjoy watching them as much as I did making them.</p>
 
   <p>
-    more videos can be found on
+    More videos can be found on
     <a href="http://www.vimeo.com/mmoser">vimeo</a>
     and
     <a href="http://www.youtube.com/user/ObleyWan">youtube</a>
@@ -18,9 +18,14 @@
 
 {{#each videos }}
   <section>
-    <h2>{{title}}</h2>
-    <p>{{{note}}}</p>
-    <br />
-    <video src="/video/{{file}}" controls poster="/video/{{poster}}"></video>
+    <div class="video-player">
+      <h2>{{title}}</h2>
+
+      <video src="/video/{{file}}" controls poster="/video/{{poster}}"></video>
+
+      {{#if note }}<p>{{{note}}}</p>{{/if}}
+      {{#if role }}<p> My Role: {{role}}</p>{{/if}}
+      {{#if credit }}<p>{{{credit}}}</p>{{/if}}
+    </div>
   </section>
 {{/each}}