video player

site/assets/scss/components/_styleguide.scss

@@ -1,5 +1,4 @@
 
-
 .color-samples {
   > div {
     display: flex;

site/assets/scss/elements/_video.scss

@@ -0,0 +1,6 @@
+video {
+  margin: $gutter 0;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}

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';

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."

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>

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>
+    <div class="video-player">
-    <p>{{{note}}}</p>
+      <h2>{{title}}</h2>
-    <br />
+
-    <video src="/video/{{file}}" controls poster="/video/{{poster}}"></video>
+      <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}}