From 9da57c5067ce7477a56c9240fc5a952470c9b1eb Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Wed, 30 Sep 2020 15:58:49 +0200
Subject: [PATCH] embed youtube video

---
 src/components/Tutorial/Instruction.js | 14 ++++++++++----
 src/data/tutorials.json                |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js
index de0095d..255f45c 100644
--- a/src/components/Tutorial/Instruction.js
+++ b/src/components/Tutorial/Instruction.js
@@ -23,10 +23,16 @@ class Instruction extends Component {
           <Hardware picture={step.hardware}/> : null}
         {areRequirements > 0 ?
           <Requirement tutorialIds={step.requirements}/> : null}
-        {step.picture ?
-          <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
-            <img src={`/media/tutorial/${step.picture}`} alt='' style={{maxWidth: '100%'}}/>
-          </div>
+        {step.media ?
+          step.media.picture ?
+            <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
+              <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>
+          : null
         : null}
         {step.xml ?
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
diff --git a/src/data/tutorials.json b/src/data/tutorials.json
index 25972a4..67f0384 100644
--- a/src/data/tutorials.json
+++ b/src/data/tutorials.json
@@ -68,7 +68,7 @@
                 "headline": "Block richtig einbinden",
                 "text": "Dies ist ein Test.",
                 "media": {
-                  "youtube": "Q41MPMBCPto"
+                  "youtube": "sf3RzXq6iVo"
                 }
             },
             {