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/help/videos/geology.mp4 b/help/videos/geology.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..24691e16952a6d9943d5482ae6bd3855229233d6
Binary files /dev/null and b/help/videos/geology.mp4 differ
diff --git a/help/videos/geology_de.vtt b/help/videos/geology_de.vtt
new file mode 100644
index 0000000000000000000000000000000000000000..8a365e569f00628596cb2cb02fbcd31789e9a7da
--- /dev/null
+++ b/help/videos/geology_de.vtt
@@ -0,0 +1,62 @@
+WEBVTT
+
+1
+00:00:21.471 --> 00:00:26.643
+Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
+
+2
+00:00:52.343 --> 00:00:57.114
+Öffnen Sie Ihr Projekt im Transferportal gitlab
+
+3
+00:01:03.114 --> 00:01:08.171
+Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch
+
+4
+00:01:56.929 --> 00:02:01.157
+Laden Sie die Diagrammfigur in den Home-Ordner hoch
+
+5
+00:02:16.328 --> 00:02:21.541
+Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer
+
+6
+00:04:21.043 --> 00:04:24.329
+Entfernen Sie den persönlichen Website-Eintrag
+
+7
+00:05:23.686 --> 00:05:25.243
+Speichern Sie die Änderungen
+
+8
+00:05:34.243 --> 00:05:36.114
+Bearbeiten Sie die Startseite
+
+9
+00:06:51.329 --> 00:06:54.271
+Ändern Sie die Quelle des Bildes
+
+10
+00:07:25.986 --> 00:07:29.914
+Entfernen Sie den Rest des Vorlageninhalts
+
+11
+00:08:00.057 --> 00:08:01.714
+Speichern Sie die Änderungen
+
+12
+00:08:14.186 --> 00:08:18.814
+Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird
+
+13
+00:08:40.771 --> 00:08:42.414
+Immer noch am arbeiten...
+
+14
+00:08:50.271 --> 00:08:52.943
+Ihre Webseite ist veröffentlicht
+
+15
+00:09:11.086 --> 00:09:12.429
+Besuchen Sie die URL
+
diff --git a/help/videos/geology_en.vtt b/help/videos/geology_en.vtt
new file mode 100644
index 0000000000000000000000000000000000000000..306c327c109c7fcc021ca5fef1f4e1b98816533f
--- /dev/null
+++ b/help/videos/geology_en.vtt
@@ -0,0 +1,67 @@
+WEBVTT
+
+1
+00:00:21.471 --> 00:00:26.643
+Sign into your portal account
+and create a new project
+
+2
+00:00:52.343 --> 00:00:57.114
+Open your project in the transfer portal gitlab
+
+3
+00:01:03.114 --> 00:01:08.171
+Upload the logo
+and the images into the public folder
+
+4
+00:01:56.929 --> 00:02:01.157
+Upload the chart figure
+into the home folder
+
+5
+00:02:16.328 --> 00:02:21.541
+Edit the settings for the
+page and the participants
+
+6
+00:04:21.043 --> 00:04:24.329
+Remove the personal website entry
+
+7
+00:05:23.686 --> 00:05:25.243
+Save the changes
+
+8
+00:05:34.243 --> 00:05:36.114
+Edit the home page
+
+9
+00:06:51.329 --> 00:06:54.271
+Change the source of the image
+
+10
+00:07:25.986 --> 00:07:29.914
+Remove the rest of the template content
+
+11
+00:08:00.057 --> 00:08:01.714
+Save the changes
+
+12
+00:08:14.186 --> 00:08:18.814
+Wait a few seconds for the web page
+to be published
+
+13
+00:08:40.771 --> 00:08:42.414
+Still working...
+
+14
+00:08:50.271 --> 00:08:52.943
+Your web page is published
+
+15
+00:09:11.086 --> 00:09:12.429
+Visit the URL
+
diff --git a/help/videos/reactive.mp4 b/help/videos/reactive.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0ce37cb478503ad14a2aea2e38f8fc2352988
Binary files /dev/null and b/help/videos/reactive.mp4 differ
diff --git a/help/videos/reactive_de.vtt b/help/videos/reactive_de.vtt
new file mode 100644
index 0000000000000000000000000000000000000000..8a365e569f00628596cb2cb02fbcd31789e9a7da
--- /dev/null
+++ b/help/videos/reactive_de.vtt
@@ -0,0 +1,62 @@
+WEBVTT
+
+1
+00:00:21.471 --> 00:00:26.643
+Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
+
+2
+00:00:52.343 --> 00:00:57.114
+Öffnen Sie Ihr Projekt im Transferportal gitlab
+
+3
+00:01:03.114 --> 00:01:08.171
+Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch
+
+4
+00:01:56.929 --> 00:02:01.157
+Laden Sie die Diagrammfigur in den Home-Ordner hoch
+
+5
+00:02:16.328 --> 00:02:21.541
+Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer
+
+6
+00:04:21.043 --> 00:04:24.329
+Entfernen Sie den persönlichen Website-Eintrag
+
+7
+00:05:23.686 --> 00:05:25.243
+Speichern Sie die Änderungen
+
+8
+00:05:34.243 --> 00:05:36.114
+Bearbeiten Sie die Startseite
+
+9
+00:06:51.329 --> 00:06:54.271
+Ändern Sie die Quelle des Bildes
+
+10
+00:07:25.986 --> 00:07:29.914
+Entfernen Sie den Rest des Vorlageninhalts
+
+11
+00:08:00.057 --> 00:08:01.714
+Speichern Sie die Änderungen
+
+12
+00:08:14.186 --> 00:08:18.814
+Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird
+
+13
+00:08:40.771 --> 00:08:42.414
+Immer noch am arbeiten...
+
+14
+00:08:50.271 --> 00:08:52.943
+Ihre Webseite ist veröffentlicht
+
+15
+00:09:11.086 --> 00:09:12.429
+Besuchen Sie die URL
+
diff --git a/help/videos/reactive_en.vtt b/help/videos/reactive_en.vtt
new file mode 100644
index 0000000000000000000000000000000000000000..306c327c109c7fcc021ca5fef1f4e1b98816533f
--- /dev/null
+++ b/help/videos/reactive_en.vtt
@@ -0,0 +1,67 @@
+WEBVTT
+
+1
+00:00:21.471 --> 00:00:26.643
+Sign into your portal account
+and create a new project
+
+2
+00:00:52.343 --> 00:00:57.114
+Open your project in the transfer portal gitlab
+
+3
+00:01:03.114 --> 00:01:08.171
+Upload the logo
+and the images into the public folder
+
+4
+00:01:56.929 --> 00:02:01.157
+Upload the chart figure
+into the home folder
+
+5
+00:02:16.328 --> 00:02:21.541
+Edit the settings for the
+page and the participants
+
+6
+00:04:21.043 --> 00:04:24.329
+Remove the personal website entry
+
+7
+00:05:23.686 --> 00:05:25.243
+Save the changes
+
+8
+00:05:34.243 --> 00:05:36.114
+Edit the home page
+
+9
+00:06:51.329 --> 00:06:54.271
+Change the source of the image
+
+10
+00:07:25.986 --> 00:07:29.914
+Remove the rest of the template content
+
+11
+00:08:00.057 --> 00:08:01.714
+Save the changes
+
+12
+00:08:14.186 --> 00:08:18.814
+Wait a few seconds for the web page
+to be published
+
+13
+00:08:40.771 --> 00:08:42.414
+Still working...
+
+14
+00:08:50.271 --> 00:08:52.943
+Your web page is published
+
+15
+00:09:11.086 --> 00:09:12.429
+Visit the URL
+
diff --git a/help/videos/serene.mp4 b/help/videos/serene.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..dfa893a74559a73d27b58519e0a561a33ce9df72
Binary files /dev/null and b/help/videos/serene.mp4 differ
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