Merge pull request #11219 from atjonathan/fix/hikes-styling

Fixed styling issues with Hikes

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%;
 }

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

client/less/lib/bootstrap/responsive-embed.less

@@ -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%;
-  }
-}

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>