From b804a271e71788a8d1ef26067f5b6c248b6cfb16 Mon Sep 17 00:00:00 2001
From: lone-cloud <lonecloud604@pm.me>
Date: Wed, 27 Jan 2016 00:43:22 -0800
Subject: [PATCH] mobile responsive video

---
 app/pods/components/huegasm-app/template.hbs |  4 +++-
 app/styles/app.scss                          | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/pods/components/huegasm-app/template.hbs b/app/pods/components/huegasm-app/template.hbs
index 3d38141..893df7f 100644
--- a/app/pods/components/huegasm-app/template.hbs
+++ b/app/pods/components/huegasm-app/template.hbs
@@ -8,8 +8,10 @@
       <div class="title"><img src="assets/images/logo.png" alt="Huegasm"></div>
       <p id="intro">Your lights, meet your music. Huegasm.</p>
       <p id="introParagraph">Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.</p>
-      <div class="embedContainer">
+      <div class="embedContainerWrapper">
+        <div class="embedContainer">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
+        </div>
       </div>
       {{#paper-button raised=true primary=true action="isReady" class="goButton center-block"}}Go!{{/paper-button}}
     </div>
diff --git a/app/styles/app.scss b/app/styles/app.scss
index ed00205..a0a6a26 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -33,6 +33,24 @@ body {
 }
 
 .embedContainer {
+  position:relative;
+  padding-bottom:56.25%;
+  padding-top:30px;
+  height:0;
+  overflow:hidden;
+}
+
+.embedContainerWrapper {
+  max-width: 600px;
+  margin: auto;
+}
+
+.embedContainer iframe, .embedContainer object, .embedContainer embed {
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
 }
 
 .goButton {