fix: responsive videos (#39171)

client/src/templates/Challenges/video/Show.js

@@ -178,11 +178,12 @@ export class Project extends Component {
           <Helmet title={`${blockNameTitle} | Learn | freeCodeCamp.org`} />
           <Grid>
             <Row>
-              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
               <Spacer />
               <ChallengeTitle isCompleted={isChallengeCompleted}>
                 {blockNameTitle}
               </ChallengeTitle>
+
+              <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
                 <div className='video-wrapper'>
                   {!this.state.videoIsLoaded ? (
                     <div className='video-placeholder-loader'>
@@ -200,8 +201,8 @@ export class Project extends Component {
                       playerVars: {
                         rel: 0
                       },
-                      width: '960px',
-                      height: '540px'
+                      width: 'auto',
+                      height: 'auto'
                     }}
                     videoId={videoId}
                   />
@@ -220,6 +221,8 @@ export class Project extends Component {
                     .
                   </i>
                 </div>
+              </Col>
+              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ChallengeDescription description={description} />
                 <PrismFormatted className={'line-numbers'} text={text} />
                 <Spacer />

client/src/templates/Challenges/video/show.css

@@ -1,9 +1,18 @@
 .video-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
-  padding: 20px 0;
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+.video-wrapper iframe,
+.video-wrapper object,
+.video-wrapper embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .video-placeholder-loader {