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 } /> @@ -85,6 +91,7 @@ export class Lecture extends React.Component { mdOffset={ 1 } xs={ 12 } > +