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

embed youtube video

Browse Source
This commit is contained in:
Delucse 2020-09-30 15:58:49 +02:00
parent f97ab10a53
commit 9da57c5067
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,10 +23,16 @@ class Instruction extends Component {
<Hardware picture={step.hardware}/> : null} <Hardware picture={step.hardware}/> : null}
{areRequirements > 0 ? {areRequirements > 0 ?
<Requirement tutorialIds={step.requirements}/> : null} <Requirement tutorialIds={step.requirements}/> : null}
{step.picture ? {step.media ?
step.media.picture ?
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}> <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
<img src={`/media/tutorial/${step.picture}`} alt='' style={{maxWidth: '100%'}}/> <img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/>
</div> </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>
: null
: null} : null}
{step.xml ? {step.xml ?
<Grid container spacing={2} style={{marginBottom: '5px'}}> <Grid container spacing={2} style={{marginBottom: '5px'}}>

2
src/data/tutorials.json
View File

@ -68,7 +68,7 @@
"headline": "Block richtig einbinden", "headline": "Block richtig einbinden",
"text": "Dies ist ein Test.", "text": "Dies ist ein Test.",
"media": { "media": {
"youtube": "Q41MPMBCPto" "youtube": "sf3RzXq6iVo"
} }
}, },
{ {