From 6777823607e0aeb187db3379715a1b002aac047f Mon Sep 17 00:00:00 2001
From: theflametrooper <theflametrooper@gmail.com>
Date: Sat, 15 Oct 2016 15:15:30 +0100
Subject: [PATCH] =?UTF-8?q?Fixed=20styling=20issues=20with=20Hikes=20?=
 =?UTF-8?q?=E2=9A=99=20Fixed=20tabs/spaces=20issue=20=F0=9F=93=B1=20Added?=
 =?UTF-8?q?=20responsiveness=20to=20YouTube=20embed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/less/challenge.less                    |  5 +++
 client/less/lib/bootstrap/bootstrap.less      |  1 -
 .../less/lib/bootstrap/responsive-embed.less  | 35 -------------------
 .../challenges/components/video/Lecture.jsx   |  7 ++++
 4 files changed, 12 insertions(+), 36 deletions(-)
 delete mode 100755 client/less/lib/bootstrap/responsive-embed.less

diff --git a/client/less/challenge.less b/client/less/challenge.less
index ceaf40c2a8..e3f6224fad 100644
--- a/client/less/challenge.less
+++ b/client/less/challenge.less
@@ -217,4 +217,9 @@ iframe.iphone {
   @media (min-width: 1200px) and (max-width: 1250px){
     right: -207px;
   }
+}
+
+// YouTube embed
+.embed-responsive-item {
+  max-width: 100%;
 }
\ No newline at end of file
diff --git a/client/less/lib/bootstrap/bootstrap.less b/client/less/lib/bootstrap/bootstrap.less
index 61b77474f9..4f85a0dd36 100755
--- a/client/less/lib/bootstrap/bootstrap.less
+++ b/client/less/lib/bootstrap/bootstrap.less
@@ -35,7 +35,6 @@
 @import "media.less";
 @import "list-group.less";
 @import "panels.less";
-@import "responsive-embed.less";
 @import "wells.less";
 @import "close.less";
 
diff --git a/client/less/lib/bootstrap/responsive-embed.less b/client/less/lib/bootstrap/responsive-embed.less
deleted file mode 100755
index c1fa8f8488..0000000000
--- a/client/less/lib/bootstrap/responsive-embed.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// Embeds responsive
-//
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-
-  .embed-responsive-item,
-  iframe,
-  embed,
-  object,
-  video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    border: 0;
-  }
-
-  // Modifier class for 16:9 aspect ratio
-  &.embed-responsive-16by9 {
-    padding-bottom: 56.25%;
-  }
-
-  // Modifier class for 4:3 aspect ratio
-  &.embed-responsive-4by3 {
-    padding-bottom: 75%;
-  }
-}
diff --git a/common/app/routes/challenges/components/video/Lecture.jsx b/common/app/routes/challenges/components/video/Lecture.jsx
index 0f4cd42970..d3bac55694 100644
--- a/common/app/routes/challenges/components/video/Lecture.jsx
+++ b/common/app/routes/challenges/components/video/Lecture.jsx
@@ -27,6 +27,11 @@ const mapStateToProps = createSelector(
   })
 );
 
+const embedOpts = {
+  width: '853',
+  height: '480'
+};
+
 export class Lecture extends React.Component {
   static displayName = 'Lecture';
 
@@ -75,6 +80,7 @@ export class Lecture extends React.Component {
               className='embed-responsive-item'
               id={ id }
               onError={ this.handleError }
+              opts={ embedOpts }
               videoId={ videoId }
             />
           </div>
@@ -85,6 +91,7 @@ export class Lecture extends React.Component {
             mdOffset={ 1 }
             xs={ 12 }
             >
+            <div className='spacer' />
             <article>
               { this.renderTranscript(description, dashedName) }
             </article>