gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: responsive videos (#39171)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2020-07-17 21:03:10 +02:00
committed by GitHub
parent 01d61afd5f
commit bb019b2b0f
2 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/templates/Challenges/video/Show.js
View File

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

19
client/src/templates/Challenges/video/show.css
View File

@ -1,9 +1,18 @@
.video-wrapper { .video-wrapper {
display: flex; position: relative;
flex-direction: column; padding-bottom: 56.25%;
justify-content: space-evenly; height: 0;
align-items: center; overflow: hidden;
padding: 20px 0; 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 { .video-placeholder-loader {