diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index 1baddbe24feb70a246e7ee7657faf0036a5a1157..ac21fea717f4a4fd2eb38cb002b75bbf2a481f70 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/css/Testimonials.css">
     <link rel="stylesheet" href="/css/help.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+    <link href="https://cdn.plyr.io/3.6.9/plyr.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -595,7 +596,22 @@
                                     </p>
                                     <img src="/img/help/generic.png"/>
                                 </div>
-                            </div>                            
+                            </div>    
+                            
+                            <br/>
+                            
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <a class="collapsed" data-toggle="collapse" href="#collapse10t" aria-expanded="false" aria-controls="collapse10t">
+                                        <small>Videoanleitung</small></a>
+                                    </h3>
+                                </div>
+                                <div id="collapse10t" class="card-body collapse">
+                                    <video id="player" playsinline controls></video>
+                                    <button id="next">Next</button>
+                                </div>
+                            </div>  
 
                         </div>
                 </div>
@@ -645,6 +661,9 @@
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
 <script src="/js/mobile.js"></script>
+<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
+<script src="/js/player.js"></script>
+
 </body>
 
 </html>
diff --git a/js/player.js b/js/player.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb250bfb52620bca97e275314ab416ea9387b53b
--- /dev/null
+++ b/js/player.js
@@ -0,0 +1,66 @@
+const player = new Plyr('#player', {
+  captions: { active: true, language: 'de', update: false }
+});
+
+player.source = {
+  type: 'video',
+  title: 'geology',
+  sources: [
+    {
+      src: 'videos/reactive.mp4',
+      type: 'video/mp4'
+    }
+  ],
+  tracks: [
+    {
+      kind: 'captions',
+      label: 'German',
+      srclang: 'de',
+      src: 'videos/reactive_de.vtt',
+      default: true,
+    },
+    {
+      kind: 'captions',
+      label: 'English',
+      srclang: 'en',
+      src: 'videos/reactive_en.vtt'
+    },
+  ],
+};
+
+
+let btn = document.getElementById("next");
+
+
+btn.onclick = () => {
+
+  player.source = {
+    type: 'video',
+    title: 'geology',
+    sources: [
+      {
+        src: 'videos/geology.mp4',
+        type: 'video/mp4',
+        size: 720,
+      }
+    ],
+    tracks: [
+      {
+        kind: 'captions',
+        label: 'German',
+        srclang: 'de',
+        src: 'videos/geology_de.vtt',
+        default: true,
+      },
+      {
+        kind: 'captions',
+        label: 'English',
+        srclang: 'en',
+        src: 'videos/geology_en.vtt'
+      },
+    ],
+  };
+  player.play();
+
+
+};
\ No newline at end of file