schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setting the maximum display size of the embedded youtube video

Browse Source
This commit is contained in:
Delucse 2020-09-30 16:58:02 +02:00
parent 1cd00dab3f
commit 5daa336a04
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Tutorial/Builder/Media.js
View File

@ -151,10 +151,11 @@ class Media extends Component {
<div> <div>
<Textfield value={this.props.value && this.props.value.youtube} property={'media'} property2={'youtube'} label={'Youtube-ID'} index={this.props.index} error={this.props.error} errorText={`Gib eine Youtube-ID ein.`}/> <Textfield value={this.props.value && this.props.value.youtube} property={'media'} property2={'youtube'} label={'Youtube-ID'} index={this.props.index} error={this.props.error} errorText={`Gib eine Youtube-ID ein.`}/>
{this.props.youtube && !this.props.error ? {this.props.youtube && !this.props.error ?
<div> /*16:9; width: 800px; height: width/16*9=450px*/
<div style={{maxWidth: '800px'}}>
<FormHelperText style={{lineHeight: 'initial', margin: '0 25px 10px 25px'}}>{`Stelle sicher, dass das unten angezeigte Youtube-Video funktioniert, andernfalls überprüfe die Youtube-ID.`}</FormHelperText> <FormHelperText style={{lineHeight: 'initial', margin: '0 25px 10px 25px'}}>{`Stelle sicher, dass das unten angezeigte Youtube-Video funktioniert, andernfalls überprüfe die Youtube-ID.`}</FormHelperText>
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}> <div style={{position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)'}}>
<iframe title={this.props.youtube} style={{borderRadius: '25px', position: 'absolute', top: '0', left: '0', width: '100%', height: '100%'}} src={`https://www.youtube.com/embed/${this.props.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /> <iframe title={this.props.youtube} style={{borderRadius: '25px', position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px'}} src={`https://www.youtube.com/embed/${this.props.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</div> </div>
</div> </div>
: null} : null}

7
src/components/Tutorial/Instruction.js
View File

@ -29,8 +29,11 @@ class Instruction extends Component {
<img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/> <img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/>
</div> </div>
: step.media.youtube ? : step.media.youtube ?
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}> /*16:9; width: 800px; height: width/16*9=450px*/
<iframe title={step.media.youtube} style={{position: 'absolute', top: '0', left: '0', width: '100%', height: '100%'}} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /> <div style={{maxWidth: '800px', margin: 'auto'}}>
<div style={{position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)'}}>
<iframe title={step.media.youtube} style={{position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px'}} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</div>
</div> </div>
: null : null
: null} : null}