responsive challenge videos

public/css/styles.less

@@ -130,4 +130,7 @@ ul {
   margin-bottom: -20px;
 }
 
+.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
+.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
 /**/

views/challenges/partials/challenge.jade

@@ -1,12 +1,8 @@
 .panel.panel-primary
     .panel-heading Challenge: #{name}
     .panel.panel-body
-        img.img-center.img-responsive(src=image)
-        br
-        .visible-xs
-            iframe(src='//player.vimeo.com/video/#{video}', width='300', height='187', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-        .hidden-xs
-            iframe(src='//player.vimeo.com/video/#{video}', width='600', height='375', style="display:block;", frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
+        .responsive-container
+            iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
         h3 Instructions:
         for direction in directions
             p= direction

views/curriculum/curriculum.jade

@@ -12,7 +12,7 @@ block content
                     li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
                 p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
                     a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
-
+x
         .col-sm-4.col-xs-12
             include ./../partials/challenges
         .col-sm-4.col-xs-12