diff --git a/android/app/build.gradle b/android/app/build.gradle
index 8ac821d1..9b601606 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -6,7 +6,7 @@ android {
         applicationId "de.reedu.origaminext"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 2
         versionName "0.22"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
diff --git a/android/app/src/main/assets/capacitor.config.json b/android/app/src/main/assets/capacitor.config.json
index ef5b7c98..9f665823 100644
--- a/android/app/src/main/assets/capacitor.config.json
+++ b/android/app/src/main/assets/capacitor.config.json
@@ -6,7 +6,8 @@
   "webDir": "www",
   "server": {
     "iosScheme": "https",
-    "androidScheme": "https"
+    "androidScheme": "https",
+    "url": "http://192.168.0.87:8100"
   },
   "ios": {
     "hideLogs": true
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
index 909c3814..9ea09e42 100644
--- a/ios/App/App.xcodeproj/project.pbxproj
+++ b/ios/App/App.xcodeproj/project.pbxproj
@@ -29,6 +29,8 @@
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = SOURCE_ROOT; };
 		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
+		DCD0FED425A4915A00CE032C /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = de.lproj/Main.strings; sourceTree = "<group>"; };
+		DCD0FED525A4915A00CE032C /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = de.lproj/LaunchScreen.strings; sourceTree = "<group>"; };
 		DCD30EDB2433A890007ABCBF /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
 		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -141,6 +143,7 @@
 			knownRegions = (
 				en,
 				Base,
+				de,
 			);
 			mainGroup = 504EC2FB1FED79650016851F;
 			productRefGroup = 504EC3051FED79650016851F /* Products */;
@@ -220,6 +223,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				504EC30C1FED79650016851F /* Base */,
+				DCD0FED425A4915A00CE032C /* de */,
 			);
 			name = Main.storyboard;
 			sourceTree = "<group>";
@@ -228,6 +232,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				504EC3111FED79650016851F /* Base */,
+				DCD0FED525A4915A00CE032C /* de */,
 			);
 			name = LaunchScreen.storyboard;
 			sourceTree = "<group>";
@@ -287,7 +292,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -342,7 +347,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
diff --git a/ios/App/App/capacitor.config.json b/ios/App/App/capacitor.config.json
index ef5b7c98..9f665823 100644
--- a/ios/App/App/capacitor.config.json
+++ b/ios/App/App/capacitor.config.json
@@ -6,7 +6,8 @@
   "webDir": "www",
   "server": {
     "iosScheme": "https",
-    "androidScheme": "https"
+    "androidScheme": "https",
+    "url": "http://192.168.0.87:8100"
   },
   "ios": {
     "hideLogs": true
diff --git a/src/app/pages/create-game/create-info-modal/create-info-modal.component.html b/src/app/pages/create-game/create-info-modal/create-info-modal.component.html
index 2fc94ac5..748197da 100644
--- a/src/app/pages/create-game/create-info-modal/create-info-modal.component.html
+++ b/src/app/pages/create-game/create-info-modal/create-info-modal.component.html
@@ -1,16 +1,17 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button color=dark (click)="dismissModal('close')">
+      <ion-button color="dark" (click)="dismissModal('close')">
         <ion-icon name="close"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>
-      <ion-icon name="information-circle-outline" color="warning"></ion-icon> Information
+      <ion-icon name="information-circle-outline" color="warning"></ion-icon>
+      Information
     </ion-title>
 
     <ion-buttons slot="end">
-      <ion-button color=dark (click)="dismissModal(null)">
+      <ion-button color="dark" (click)="dismissModal(null)">
         <ion-icon name="save"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -18,7 +19,6 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-
   <ion-card color="warning">
     <ion-card-content>
       <ion-icon name="help-circle"></ion-icon>
@@ -29,22 +29,31 @@
   <h5>Informationstext</h5>
 
   <ion-item>
-    <ion-textarea autoGrow placeholder=" (optional)" *ngIf="task" [(ngModel)]="task.question.text"></ion-textarea>
+    <ion-textarea
+      autoGrow
+      placeholder=" (optional)"
+      *ngIf="task"
+      [(ngModel)]="task.question.text"
+    ></ion-textarea>
   </ion-item>
 
   <h5>Audiobotschaft</h5>
 
-  <app-audio-recorder [(audioSource)]="task.question.audio"></app-audio-recorder>
+  <app-audio-recorder
+    [(audioSource)]="task.question.audio"
+  ></app-audio-recorder>
 
   <h5>Fotos und Grafiken</h5>
 
-  <app-photo-upload theme="warning" [(photo)]="task.question.photo"></app-photo-upload>
+  <app-photo-upload
+    theme="warning"
+    [(photo)]="task.question.photo"
+    [(video)]="task.question.video"
+  ></app-photo-upload>
 
   <h5>Weitere Einstellungen</h5>
 
   <ion-item detail lines="none" (click)="presentMapFeaturesModal()">
-    <ion-label>
-      Kartenfeatures
-    </ion-label>
+    <ion-label> Kartenfeatures </ion-label>
   </ion-item>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.html b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.html
index d0f6be3d..2e8018cc 100644
--- a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.html
+++ b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.html
@@ -7,20 +7,47 @@ <h5>{{ config.label }} <ion-icon name="information-circle" (click)='showPopover(
   <div class="photo-wrapper">
     <ion-thumbnail *ngIf="photo" class="preview">
       <ion-spinner *ngIf="uploading"></ion-spinner>
-      <img [src]="photo" [ngStyle]="{
-        filter: 'blur(' + ((100 - uploadingProgress) / 10) + 'px)'
-      }">
+      <img
+        [src]="photo"
+        [ngStyle]="{
+          filter: 'blur(' + (100 - uploadingProgress) / 10 + 'px)'
+        }"
+      />
     </ion-thumbnail>
-    <ion-button [color]="theme" size="default" (click)=capturePhoto(false)>
+    <ion-button [color]="theme" size="default" (click)="capturePhoto(false)">
       <ion-icon slot="icon-only" name="camera"></ion-icon>
     </ion-button>
-    <ion-button [color]="theme" size="default" (click)=capturePhoto(true)>
+    <ion-button [color]="theme" size="default" (click)="capturePhoto(true)">
       <ion-icon slot="icon-only" name="images"></ion-icon>
     </ion-button>
-    <ion-button *ngIf="photo" color="danger" size="default" (click)=deletePhoto()>
+
+    <ion-button [color]="theme" size="default" (click)="f.click()">
+      <ion-icon slot="icon-only" name="videocam-outline"></ion-icon>
+    </ion-button>
+    <input
+      class="ion-hide"
+      #f
+      type="file"
+      id="file-input"
+      (change)="handleVideoInput($event)"
+      accept="video/*"
+    />
+
+    <ion-button
+      *ngIf="photo"
+      color="danger"
+      size="default"
+      (click)="deletePhoto()"
+    >
       <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
     </ion-button>
   </div>
-
-
-</ng-container>
\ No newline at end of file
+  <div *ngIf="video">
+    <video controls>
+      <source [src]="video" />
+    </video>
+    <ion-button color="danger" size="default" (click)="deleteVideo()">
+      <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+    </ion-button>
+  </div>
+</ng-container>
diff --git a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.scss b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.scss
index b5ddeb09..438efca9 100644
--- a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.scss
+++ b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.scss
@@ -1,23 +1,28 @@
 .preview {
-    position: relative;
+  position: relative;
 
-    > ion-spinner {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+  > ion-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 ion-thumbnail {
-    --size: 150px !important;
+  --size: 150px !important;
 }
 
 .photo-wrapper {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    img {
-        border-radius: 1rem;
-    }
+  img {
+    border-radius: 1rem;
+  }
+}
+
+video {
+  width: auto;
+  max-height: 200px;
 }
diff --git a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.ts b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.ts
index b62393a8..982d38d0 100644
--- a/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.ts
+++ b/src/app/pages/create-game/form-elements/photo-upload/photo-upload.component.ts
@@ -13,10 +13,12 @@ import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
 })
 export class PhotoUploadComponent implements OnInit {
   @Input() photo: SafeResourceUrl = '';
+  @Input() video: SafeResourceUrl = '';
   @Input() taskType = '';
   @Input() theme = 'secondary';
 
   @Output() photoChange: EventEmitter<any> = new EventEmitter<any>();
+  @Output() videoChange: EventEmitter<any> = new EventEmitter<any>();
 
   uploading = false
   uploadingProgress = 100;
@@ -37,6 +39,12 @@ export class PhotoUploadComponent implements OnInit {
     this.photoChange.emit(this.photo)
   }
 
+  deleteVideo() {
+    this.video = ''
+    this.changeRef.detectChanges();
+    this.videoChange.emit(this.video)
+  }
+
   async capturePhoto(library: boolean = false) {
     const cameraOptions = {
       quality: 50,
@@ -76,6 +84,31 @@ export class PhotoUploadComponent implements OnInit {
     this.photoChange.emit(this.photo)
   }
 
+  async handleVideoInput(event) {
+    const videoFile: File = event.target.files[0];
+
+    const formData = new FormData();
+    formData.append('file', videoFile);
+
+    const options = {
+      method: 'POST',
+      body: formData
+    };
+
+    const postResponse = await fetch(`${environment.apiURL}/file/upload`, options)
+
+    if (!postResponse.ok) {
+      throw Error('File upload failed')
+    }
+    this.uploading = false;
+
+    const postResponseText = await postResponse.json()
+    const filename = postResponseText.filename
+    this.video = `${environment.apiURL}/file/video/${filename}`
+    this.changeRef.detectChanges();
+    this.videoChange.emit(this.video)
+  }
+
   async showPopover(ev: any, text: string) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,
diff --git a/src/app/pages/create-game/form-elements/question-types/question-type.component.html b/src/app/pages/create-game/form-elements/question-types/question-type.component.html
index 98060ff1..f99a3113 100644
--- a/src/app/pages/create-game/form-elements/question-types/question-type.component.html
+++ b/src/app/pages/create-game/form-elements/question-types/question-type.component.html
@@ -1,124 +1,275 @@
 <div
-    *ngIf="question.type != questionTypeEnum.NAV_INSTRUCTION && question.type != questionTypeEnum.NAV_INSTRUCTION_PHOTO">
-    <h5>Aufgabenstellung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Diese Aufgabenstellung wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
+  *ngIf="
+    question.type != questionTypeEnum.NAV_INSTRUCTION &&
+    question.type != questionTypeEnum.NAV_INSTRUCTION_PHOTO
+  "
+>
+  <h5>
+    Aufgabenstellung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover($event, 'Diese Aufgabenstellung wird im Spiel angezeigt.')
+      "
+    >
+    </ion-icon>
+  </h5>
+  <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.NAV_INSTRUCTION">
-    <h5>Navigationsanweisung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Füge hier eine genaue Wegbeschreibung ein. Diese wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
+  <h5>
+    Navigationsanweisung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Füge hier eine genaue Wegbeschreibung ein. Diese wird im Spiel angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.NAV_INSTRUCTION_PHOTO">
-    <h5>Foto <ion-icon name="information-circle" (click)="showPopover($event, 'Dieses Foto wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-photo-upload [(photo)]="question.photo" [taskType]="taskType" theme="primary"></app-photo-upload>
-    <h5>Navigationsanweisung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Füge hier eine genaue Wegbeschreibung ein. Diese wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
+  <h5>
+    Foto
+    <ion-icon
+      name="information-circle"
+      (click)="showPopover($event, 'Dieses Foto wird im Spiel angezeigt.')"
+    >
+    </ion-icon>
+  </h5>
+  <app-photo-upload
+    [(photo)]="question.photo"
+    [(video)]="question.video"
+    [taskType]="taskType"
+    theme="primary"
+  ></app-photo-upload>
+  <h5>
+    Navigationsanweisung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Füge hier eine genaue Wegbeschreibung ein. Diese wird im Spiel angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <ion-textarea autoGrow [(ngModel)]="question.text"></ion-textarea>
 </div>
 
 <div>
-    <h5>Audiobotschaft
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Die Aufgabenstellung kann auch als Audiobotschaft abgespielt werden. Klicke auf den Record Button um eine Audiobotschaft aufzunehmen.')">
-        </ion-icon>
-    </h5>
-    <app-audio-recorder [(audioSource)]="question.audio"></app-audio-recorder>
+  <h5>
+    Audiobotschaft
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Die Aufgabenstellung kann auch als Audiobotschaft abgespielt werden. Klicke auf den Record Button um eine Audiobotschaft aufzunehmen.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-audio-recorder [(audioSource)]="question.audio"></app-audio-recorder>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_FEATURE">
-    <h5>Objektposition
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere das Objekt, das der Spieler in seiner Nähe finden soll. Klicke dazu auf das kleine Quadrat, umrande das Objekt dann mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen. Die Markierung wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="geometry" drawTheme="searchArea" [(feature)]="question.geometry"></app-map>
+  <h5>
+    Objektposition
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere das Objekt, das der Spieler in seiner Nähe finden soll. Klicke dazu auf das kleine Quadrat, umrande das Objekt dann mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen. Die Markierung wird im Spiel angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map
+    featureType="geometry"
+    drawTheme="searchArea"
+    [(feature)]="question.geometry"
+  ></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_FEATURE_FREE">
-    <h5>Kartenmarkierung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Die gewählte Kartenmarkierung wird dem Spieler bei der Aufgabenstellung angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="geometry-free" drawTheme="searchArea" [(feature)]="question.geometry"></app-map>
+  <h5>
+    Kartenmarkierung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Die gewählte Kartenmarkierung wird dem Spieler bei der Aufgabenstellung angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map
+    featureType="geometry-free"
+    drawTheme="searchArea"
+    [(feature)]="question.geometry"
+  ></app-map>
 </div>
 
 <div *ngIf="question.mode == taskModeEnum.NO_FEATURE">
-    <h5>Objektposition
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere das Objekt, das der Spieler in seiner Umgebung finden soll. Klicke dazu auf das kleine Quadrat, umrande das Objekt dann mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="geometry" drawTheme="searchArea" [(feature)]="question.geometry"></app-map>
+  <h5>
+    Objektposition
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere das Objekt, das der Spieler in seiner Umgebung finden soll. Klicke dazu auf das kleine Quadrat, umrande das Objekt dann mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map
+    featureType="geometry"
+    drawTheme="searchArea"
+    [(feature)]="question.geometry"
+  ></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_FEATURE_PHOTO">
-    <h5>Foto des zu suchenden Objekts
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Füge ein Foto vom gesuchten Objekt ein. Es wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-photo-upload [(photo)]="question.photo" [taskType]="taskType"></app-photo-upload>
-    <h5>Objektposition
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere das gesuchte Objekt auf der Karte. Klicke dazu auf das kleine Quadrat, umrande dann das Objekt mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="geometry" drawTheme="searchArea" [(feature)]="question.geometry"></app-map>
+  <h5>
+    Foto des zu suchenden Objekts
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Füge ein Foto vom gesuchten Objekt ein. Es wird im Spiel angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-photo-upload
+    [(photo)]="question.photo"
+    [(video)]="question.video"
+    [taskType]="taskType"
+  ></app-photo-upload>
+  <h5>
+    Objektposition
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere das gesuchte Objekt auf der Karte. Klicke dazu auf das kleine Quadrat, umrande dann das Objekt mit mehreren Klicks und tippe auf den zuletzt gewählten Punkt, um deine Auswahl zu bestätigen.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map
+    featureType="geometry"
+    drawTheme="searchArea"
+    [(feature)]="question.geometry"
+  ></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_DIRECTION">
-    <h5>Gewünschte Blickrichtung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt. Die App wird den Spieler in diese Richtung leiten, ohne die Karte anzuzeigen.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="direction" [(feature)]="question.direction"></app-map>
+  <h5>
+    Gewünschte Blickrichtung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt. Die App wird den Spieler in diese Richtung leiten, ohne die Karte anzuzeigen.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map featureType="direction" [(feature)]="question.direction"></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_DIRECTION_MARKER">
-    <h5>Richtung auf der Karte
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt. Die Markierung wird im Spiel angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="direction" [(feature)]="question.direction"></app-map>
+  <h5>
+    Richtung auf der Karte
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt. Die Markierung wird im Spiel angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map featureType="direction" [(feature)]="question.direction"></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.MAP_DIRECTION_PHOTO">
-    <h5>Foto der zu suchenden Richtung
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Wähle ein Foto, das die gesuchte Blickrichtung zeigt.')">
-        </ion-icon>
-    </h5>
-    <app-photo-upload [(photo)]="question.photo" [taskType]="taskType"></app-photo-upload>
-    <h5>Richtung auf der Karte
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt.')">
-        </ion-icon>
-    </h5>
-    <app-map featureType="direction" [(feature)]="question.direction"></app-map>
+  <h5>
+    Foto der zu suchenden Richtung
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Wähle ein Foto, das die gesuchte Blickrichtung zeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-photo-upload
+    [(photo)]="question.photo"
+    [(video)]="question.video"
+    [taskType]="taskType"
+  ></app-photo-upload>
+  <h5>
+    Richtung auf der Karte
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Markiere die Richtung, in die der Spieler blicken soll, auf der Karte. Setze dazu den roten Ring um die Position des Spielers, die er zu Aufgabenbeginn hat. Drehe die Karte nun so, dass der Pfeil in die gewünschte Richtung zeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-map featureType="direction" [(feature)]="question.direction"></app-map>
 </div>
 
 <div *ngIf="question.type == questionTypeEnum.PHOTO">
-    <h5>Foto zur Frage
-        <ion-icon name="information-circle"
-            (click)="showPopover($event, 'Das gewählte Foto wird dem Spieler bei Aufgabenstellung angezeigt.')">
-        </ion-icon>
-    </h5>
-    <app-photo-upload [(photo)]="question.photo" [taskType]="taskType"></app-photo-upload>
-</div>
\ No newline at end of file
+  <h5>
+    Foto zur Frage
+    <ion-icon
+      name="information-circle"
+      (click)="
+        showPopover(
+          $event,
+          'Das gewählte Foto wird dem Spieler bei Aufgabenstellung angezeigt.'
+        )
+      "
+    >
+    </ion-icon>
+  </h5>
+  <app-photo-upload
+    [(photo)]="question.photo"
+    [(video)]="question.video"
+    [taskType]="taskType"
+  ></app-photo-upload>
+</div>
diff --git a/src/app/pages/play-game/playing-game/playing-game.page.html b/src/app/pages/play-game/playing-game/playing-game.page.html
index 1101d73c..038bad5a 100644
--- a/src/app/pages/play-game/playing-game/playing-game.page.html
+++ b/src/app/pages/play-game/playing-game/playing-game.page.html
@@ -1,13 +1,13 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button color=dark (click)="navigateHome()">
+      <ion-button color="dark" (click)="navigateHome()">
         <ion-icon name="close"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title *ngIf="game">{{ game.name }}</ion-title>
     <ion-buttons slot="end">
-      <ion-button color=dark (click)="nextTask()">
+      <ion-button color="dark" (click)="nextTask()">
         <ion-icon name="arrow-forward"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -17,53 +17,81 @@
 <ion-content forceOverscroll="false">
   <div class="wrapper">
     <div #mapWrapper>
-      <div #map class="map" [class.blur]="task != null && task.type == 'nav-arrow'"></div>
+      <div
+        #map
+        class="map"
+        [class.blur]="task != null && task.type == 'nav-arrow'"
+      ></div>
       <div *ngIf="swipe" #swipeMap class="map"></div>
     </div>
 
-    <ion-card class="overlay feature-button reset-viewport" (click)="zoomBbox()"
-      *ngIf="game?.bbox?.features?.length > 0 && task?.type != 'nav-arrow'">
+    <ion-card
+      class="overlay feature-button reset-viewport"
+      (click)="zoomBbox()"
+      *ngIf="game?.bbox?.features?.length > 0 && task?.type != 'nav-arrow'"
+    >
       <ion-button fill="clear">
         <ion-icon name="scan-outline" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
-    <ion-card class="overlay feature-button" *ngIf="task?.mapFeatures?.rotation == 'button'" (click)="toggleRotate()">
+    <ion-card
+      class="overlay feature-button"
+      *ngIf="task?.mapFeatures?.rotation == 'button'"
+      (click)="toggleRotate()"
+    >
       <ion-button fill="clear">
         <ion-icon name="refresh" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
-    <ion-card class="overlay feature-button" *ngIf="task?.mapFeatures?.material == 'sat-button'" (click)="toggleSat()">
+    <ion-card
+      class="overlay feature-button"
+      *ngIf="task?.mapFeatures?.material == 'sat-button'"
+      (click)="toggleSat()"
+    >
       <ion-button fill="clear">
         <ion-icon name="map" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
-    <ion-card class="overlay feature-button" *ngIf="task?.mapFeatures?.material == '3D-button'" (click)="toggle3D()">
+    <ion-card
+      class="overlay feature-button"
+      *ngIf="task?.mapFeatures?.material == '3D-button'"
+      (click)="toggle3D()"
+    >
       <ion-button fill="clear">
         <ion-icon name="cube" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
-    <ion-card class="overlay feature-button" *ngIf="task?.mapFeatures?.position == 'button'"
-      (click)="toggleGeolocate()">
+    <ion-card
+      class="overlay feature-button"
+      *ngIf="task?.mapFeatures?.position == 'button'"
+      (click)="toggleGeolocate()"
+    >
       <ion-button fill="clear">
         <ion-icon name="locate" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
-    <ion-card class="overlay feature-button" *ngIf="task?.mapFeatures?.direction == 'button'"
-      (click)="toggleDirection()">
+    <ion-card
+      class="overlay feature-button"
+      *ngIf="task?.mapFeatures?.direction == 'button'"
+      (click)="toggleDirection()"
+    >
       <ion-button fill="clear">
         <ion-icon name="compass" size="large"></ion-icon>
       </ion-button>
     </ion-card>
 
     <div #panel>
-      <ion-card class="overlay task-control ion-padding" [class.minimized]="panelMinimized"
-        [class.full]="task.type == 'nav-arrow'" *ngIf="task">
-
+      <ion-card
+        class="overlay task-control ion-padding"
+        [class.minimized]="panelMinimized"
+        [class.full]="task.type == 'nav-arrow'"
+        *ngIf="task"
+      >
         <div class="top-info">
           <div *ngIf="!panelMinimized">
             <ion-chip color="primary" *ngIf="task.category.includes('nav')">
@@ -83,21 +111,40 @@
               &nbsp;Info
             </ion-chip>
           </div>
-          <ion-button color=dark fill="clear" (click)="togglePanel()"
-            *ngIf="task.category?.includes('theme') || task.answer.mode != 'NAV_ARROW'">
-            <ion-icon slot="end" name="chevron-down" size="large" *ngIf="!panelMinimized"></ion-icon>
-            <ion-icon slot="end" name="chevron-up" size="large" *ngIf="panelMinimized"></ion-icon>
+          <ion-button
+            color="dark"
+            fill="clear"
+            (click)="togglePanel()"
+            *ngIf="task.category?.includes('theme') || task.answer.mode != 'NAV_ARROW'"
+          >
+            <ion-icon
+              slot="end"
+              name="chevron-down"
+              size="large"
+              *ngIf="!panelMinimized"
+            ></ion-icon>
+            <ion-icon
+              slot="end"
+              name="chevron-up"
+              size="large"
+              *ngIf="panelMinimized"
+            ></ion-icon>
           </ion-button>
         </div>
         <div class="task-wrapper" *ngIf="!panelMinimized">
           <div class="compass large" *ngIf="task.type == 'nav-arrow'">
-            <img src="/assets/icons/compass.svg" [ngStyle]="{
+            <img
+              src="/assets/icons/compass.svg"
+              [ngStyle]="{
               transform: 'rotate(' + targetHeading + 'deg)'
-            }" />
-            <p>Zum Ziel: <br><b>{{ Math.round(targetDistance) }}</b> m</p>
+            }"
+            />
+            <p>Zum Ziel: <br /><b>{{ Math.round(targetDistance) }}</b> m</p>
           </div>
 
-          <div class="task-wrapper" [ngStyle]="{
+          <div
+            class="task-wrapper"
+            [ngStyle]="{
               'flex-wrap': [
                 'nav-arrow',
                 'theme-object',
@@ -105,46 +152,83 @@
               ].includes(task.type)
                 ? 'wrap'
                 : 'nowrap'
-            }">
-            <div class="compass bearing" *ngIf="task.answer?.mode == 'DIRECTION_ARROW'">
-              <img src="/assets/icons/direction-bearing.svg" [ngStyle]="{
+            }"
+          >
+            <div
+              class="compass bearing"
+              *ngIf="task.answer?.mode == 'DIRECTION_ARROW'"
+            >
+              <img
+                src="/assets/icons/direction-bearing.svg"
+                [ngStyle]="{
                   transform:
                     'translateX(-50%) rotate(0deg)'
-                }" />
-              <img src="/assets/icons/compass.svg" [ngStyle]="{
+                }"
+              />
+              <img
+                src="/assets/icons/compass.svg"
+                [ngStyle]="{
                   transform: 'translateX(-50%) rotate(' + indicatedDirection + 'deg)'
-                }" />
+                }"
+              />
             </div>
           </div>
 
-          <div class="photo-container"
-            *ngIf="task.question?.type == 'MAP_FEATURE_PHOTO' || task.question?.type == 'NAV_INSTRUCTION_PHOTO' || task.question?.type == 'MAP_DIRECTION_PHOTO' || task.question?.type == 'INFO' || task.question?.type == 'PHOTO'">
+          <div
+            class="photo-container"
+            *ngIf="task.question?.type == 'MAP_FEATURE_PHOTO' || task.question?.type == 'NAV_INSTRUCTION_PHOTO' || task.question?.type == 'MAP_DIRECTION_PHOTO' || task.question?.type == 'INFO' || task.question?.type == 'PHOTO'"
+          >
             <img *ngIf="task.question.photo" [src]="task.question.photo" />
+            <video controls *ngIf="task.question.video">
+              <source [src]="task.question.video" />
+            </video>
           </div>
 
-          <div *ngIf="task.answer?.type == 'MULTIPLE_CHOICE'" class="multiple-choice">
-            <ion-thumbnail slot="start" *ngFor="let item of task.answer.photos | keyvalue | shuffle">
-              <img [src]=item.value class="multiple-choize-img" (click)='onMultipleChoicePhotoSelected(item, $event)' />
+          <div
+            *ngIf="task.answer?.type == 'MULTIPLE_CHOICE'"
+            class="multiple-choice"
+          >
+            <ion-thumbnail
+              slot="start"
+              *ngFor="let item of task.answer.photos | keyvalue | shuffle"
+            >
+              <img
+                [src]="item.value"
+                class="multiple-choize-img"
+                (click)="onMultipleChoicePhotoSelected(item, $event)"
+              />
             </ion-thumbnail>
           </div>
 
-
-
-          <div class="task-text" *ngIf="task.question?.text" [innerHTML]="task.question.text | markdown | keyword">
+          <div
+            class="task-text"
+            *ngIf="task.question?.text"
+            [innerHTML]="task.question.text | markdown | keyword"
+          >
             <!-- <p *ngIf='task.settings["question-type"]?.settings["object-description"]'>
                 {{ task.settings["question-type"].settings["object-description"] }}
               </p> -->
           </div>
 
-          <div *ngIf="task.answer?.type == 'MULTIPLE_CHOICE_TEXT'" class="multiple-choice-text">
-            <div *ngFor="let item of task.answer.choices | keyvalue | shuffle"
-              (click)='onMultipleChoiceSelected(item, $event)' class="choice">
+          <div
+            *ngIf="task.answer?.type == 'MULTIPLE_CHOICE_TEXT'"
+            class="multiple-choice-text"
+          >
+            <div
+              *ngFor="let item of task.answer.choices | keyvalue | shuffle"
+              (click)="onMultipleChoiceSelected(item, $event)"
+              class="choice"
+            >
               <p>{{item.value}}</p>
             </div>
           </div>
 
           <div *ngIf="task.answer?.type == 'NUMBER'" class="number-input">
-            <ion-input type="number" pattern="\d*" [(ngModel)]="numberInput"></ion-input>
+            <ion-input
+              type="number"
+              pattern="\d*"
+              [(ngModel)]="numberInput"
+            ></ion-input>
           </div>
 
           <div *ngIf="task.answer?.type == 'TEXT'" class="text-input">
@@ -155,11 +239,15 @@
             <ion-thumbnail slot="start" *ngIf="photo" class="photo-container">
               <img [src]="photo" />
             </ion-thumbnail>
-            <ion-button color="secondary" size="default" color="secondary" (click)=capturePhoto()>
+            <ion-button
+              color="secondary"
+              size="default"
+              color="secondary"
+              (click)="capturePhoto()"
+            >
               <ion-icon slot="icon-only" name="camera"></ion-icon>
             </ion-button>
           </div>
-
         </div>
         <div class="task-text">
           <p *ngIf="task?.settings?.confirmation && task?.type == 'nav-flag'">
@@ -170,14 +258,27 @@
           </p>
         </div>
         <div class="ok-container">
-          <app-audio-player *ngIf="task.question.audio != undefined" [audioSource]="task.question.audio">
+          <app-audio-player
+            *ngIf="task.question.audio != undefined"
+            [audioSource]="task.question.audio"
+          >
           </app-audio-player>
-          <ion-button slot="end" class="confirm" [disabled]="uploading"
-            [color]="task.category.includes('nav') ? 'primary' : 'secondary'" (click)="onOkClicked()"
-            *ngIf="task.settings?.confirmation && !task?.category?.includes('info')">OK
+          <ion-button
+            slot="end"
+            class="confirm"
+            [disabled]="uploading"
+            [color]="task.category.includes('nav') ? 'primary' : 'secondary'"
+            (click)="onOkClicked()"
+            *ngIf="task.settings?.confirmation && !task?.category?.includes('info')"
+            >OK
           </ion-button>
 
-          <ion-button class="confirm" color=warning (click)="onOkClicked()" *ngIf="task?.category?.includes('info')">OK
+          <ion-button
+            class="confirm"
+            color="warning"
+            (click)="onOkClicked()"
+            *ngIf="task?.category?.includes('info')"
+            >OK
           </ion-button>
 
           <!-- <ion-button class="confirm" color=tertiary (click)="onOkClicked()" *ngIf="task?.category?.includes('free')">OK
@@ -187,11 +288,16 @@
     </div>
   </div>
 
-  <p class="accuracy">GPS Genauigkeit: {{ lastKnownPosition?.coords.accuracy.toFixed(2) }} m</p>
+  <p class="accuracy">
+    GPS Genauigkeit: {{ lastKnownPosition?.coords.accuracy.toFixed(2) }} m
+  </p>
 
   <ion-card class="overlay player-name" *ngIf="showPlayersNames">
     <h3>Wer spielt?</h3>
-    <ion-item lines="none" *ngFor="let name of playersNames; let i = index; trackBy:indexTracker">
+    <ion-item
+      lines="none"
+      *ngFor="let name of playersNames; let i = index; trackBy:indexTracker"
+    >
       <ion-label class="player-counter" slot="start">{{i + 1}}</ion-label>
       <ion-input type="text" [(ngModel)]="playersNames[i]"></ion-input>
       <ion-icon slot="end" name="trash" (click)="removePlayer(i)"></ion-icon>
@@ -201,7 +307,13 @@ <h3>Wer spielt?</h3>
       <ion-icon name="add"></ion-icon>
     </ion-button>
     <ion-item lines="none">
-      <ion-button slot="end" size="default" [disabled]="!loaded" (click)="startGame()">Fertig</ion-button>
+      <ion-button
+        slot="end"
+        size="default"
+        [disabled]="!loaded"
+        (click)="startGame()"
+        >Fertig</ion-button
+      >
     </ion-item>
   </ion-card>
 
@@ -211,10 +323,15 @@ <h3>Wer spielt?</h3>
     <h3>Herzlichen Glückwunsch!</h3>
     <p>Du hast das Spiel beendet</p>
     <div lottie [options]="lottieConfig"></div>
-    <ion-button color=primary (click)="navigateHome()" [disabled]="!uploadDone">Fertig</ion-button>
+    <ion-button
+      color="primary"
+      (click)="navigateHome()"
+      [disabled]="!uploadDone"
+      >Fertig</ion-button
+    >
   </ion-card>
 
   <ion-card class="overlay correct-position" *ngIf="showCorrectPositionModal">
     <h4>Stehst du genau richtig? Dann drücke OK!</h4>
   </ion-card>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/src/app/pages/play-game/playing-game/playing-game.page.scss b/src/app/pages/play-game/playing-game/playing-game.page.scss
index b9e0288b..72589769 100644
--- a/src/app/pages/play-game/playing-game/playing-game.page.scss
+++ b/src/app/pages/play-game/playing-game/playing-game.page.scss
@@ -320,6 +320,7 @@ ion-thumbnail {
   .photo-container {
     display: inline;
     max-height: 200px;
+    max-width: 100%;
     overflow: hidden;
     display: block;
     margin-left: auto;
@@ -336,6 +337,12 @@ ion-thumbnail {
       border-radius: 1rem;
       width: auto;
     }
+
+    > video {
+      max-height: 200px;
+      height: 100%;
+      width: auto;
+    }
   }
 }
 
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index b3fc84a9..e620a1a7 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,6 +1,7 @@
 export const environment = {
   production: true,
   // apiURL: 'https://api.ori-gami.org',
+  // apiURL: 'http://192.168.0.87:3000',
   apiURL: 'https://api.origami.felixerdmann.com',
   mapboxAccessToken: 'pk.eyJ1IjoiZmVsaXhhZXRlbSIsImEiOiI2MmE4YmQ4YjIzOTI2YjY3ZWFmNzUwOTU5NzliOTAxOCJ9.nshlehFGmK_6YmZarM2SHA',
   photoQuality: 10
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index c4c73608..01fcaa37 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,13 +4,13 @@
 
 export const environment = {
   production: false,
-  // apiURL: "http://192.168.0.87:3000",
+  // apiURL: 'http://192.168.0.87:3000',
   // apiURL: 'http://192.168.0.102:3000',
-  apiURL: "https://api.origami.felixerdmann.com",
+  apiURL: 'https://api.origami.felixerdmann.com',
   // apiURL: 'http://localhost:3000',
   // apiURL: 'https://api.ori-gami.org'
   mapboxAccessToken:
-    "pk.eyJ1IjoiZmVsaXhhZXRlbSIsImEiOiI2MmE4YmQ4YjIzOTI2YjY3ZWFmNzUwOTU5NzliOTAxOCJ9.nshlehFGmK_6YmZarM2SHA",
+    'pk.eyJ1IjoiZmVsaXhhZXRlbSIsImEiOiI2MmE4YmQ4YjIzOTI2YjY3ZWFmNzUwOTU5NzliOTAxOCJ9.nshlehFGmK_6YmZarM2SHA',
   photoQuality: 10,
 };