Merge pull request #638 from technoboy10/fix-youtube

Fix #633, #634, and #635: Embedded player fixes

src/views/teachers/landing/landing.jsx

@@ -25,8 +25,10 @@ var Landing = injectIntl(React.createClass({
                             <p className="intro">
                                 <FormattedMessage id="teacherlanding.intro" />
                             </p>
-                            <iframe src="https://www.youtube.com/embed/uPSuG063jhA"
-                                frameborder="0" allowfullscreen></iframe>
+                            <div className="ted-talk">
+                                <iframe src="https://www.youtube.com/embed/uPSuG063jhA?border=0&wmode=transparent"
+                                    frameBorder="0" allowFullScreen></iframe>
+                            </div>
                         </FlexRow>
                     </div>
                     <div className="band">

src/views/teachers/landing/landing.scss

@@ -48,12 +48,23 @@ $story-width: $cols3;
                         color: $ui-white;
                     }
                 }
+            }
 
-                iframe {
+            .ted-talk {
+                position: relative;
+                z-index: 10;
                 margin-bottom: $gutter;
                 border: 2px solid $ui-border;
                 border-radius: 10px;
                 width: $cols4;
+                height: $cols4 * .5625;
+                overflow: hidden;
+
+                iframe {
+                    z-index: 9;
+                    border: 0;
+                    width: inherit;
+                    height: inherit;
                 }
             }