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>
<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 ?
<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>
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}>
<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 />
<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%', 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>
: null}

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

@ -29,9 +29,12 @@ class Instruction extends Component {
<img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/>
</div>
: step.media.youtube ?
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}>
<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>
/*16:9; width: 800px; height: width/16*9=450px*/
<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>
: null
: null}
{step.xml ?