From 5daa336a04a38de6231e180f93bf34eb044e860c Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Wed, 30 Sep 2020 16:58:02 +0200
Subject: [PATCH] setting the maximum display size of the embedded youtube
 video

---
 src/components/Tutorial/Builder/Media.js | 7 ++++---
 src/components/Tutorial/Instruction.js   | 9 ++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Tutorial/Builder/Media.js b/src/components/Tutorial/Builder/Media.js
index 3f1896b..923aee6 100644
--- a/src/components/Tutorial/Builder/Media.js
+++ b/src/components/Tutorial/Builder/Media.js
@@ -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}
diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js
index 255f45c..ff5db1e 100644
--- a/src/components/Tutorial/Instruction.js
+++ b/src/components/Tutorial/Instruction.js
@@ -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 ?