From c0e77313430f161c73df07631b5a6de13f9aaa6b Mon Sep 17 00:00:00 2001
From: Julian Raufelder <Julian@Raufelder.com>
Date: Thu, 10 Oct 2024 21:53:36 +0200
Subject: [PATCH 1/4] Use local videos

---
 content/blog/2022-11-03-hub-1.0.de.md | 11 ++++++++---
 content/blog/2022-11-03-hub-1.0.en.md | 11 ++++++++---
 content/presskit/05-videos.de.md      | 26 ++++++++++++++++----------
 content/presskit/05-videos.en.md      | 24 +++++++++++++++---------
 hugo.toml                             |  2 +-
 layouts/hub/single.html               | 11 ++++++++---
 6 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/content/blog/2022-11-03-hub-1.0.de.md b/content/blog/2022-11-03-hub-1.0.de.md
index 976b299d00..f5a7d56f68 100644
--- a/content/blog/2022-11-03-hub-1.0.de.md
+++ b/content/blog/2022-11-03-hub-1.0.de.md
@@ -14,9 +14,14 @@ Kurz gesagt: Cryptomator Hub ermöglicht die Zugriffsverwaltung für Cryptomator
 
 Unser kurzes Einführungsvideo zeigt euch mehr über die Grundlagen von Cryptomator Hub.
 
-<div class="relative aspect-16x9">
-  <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/D14fzrsPCxY" frameborder="0" allowfullscreen></iframe>
-</div>
+<figure class="rounded shadow bg-white text-center p-2">
+  <div class="relative mb-2">
+    <video controls class="w-full h-auto">
+      <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
+    </video>
+  </div>
+  <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
+</figure>
 
 ## Wie funktioniert Cryptomator Hub?
 
diff --git a/content/blog/2022-11-03-hub-1.0.en.md b/content/blog/2022-11-03-hub-1.0.en.md
index ffadb78e4c..f03da8aa21 100644
--- a/content/blog/2022-11-03-hub-1.0.en.md
+++ b/content/blog/2022-11-03-hub-1.0.en.md
@@ -14,9 +14,14 @@ In short: Cryptomator Hub adds access management for your Cryptomator vaults. It
 
 Check out our quick introduction video to learn more about the basics.
 
-<div class="relative aspect-16x9">
-  <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/D14fzrsPCxY" frameborder="0" allowfullscreen></iframe>
-</div>
+<figure class="rounded shadow bg-white text-center p-2">
+  <div class="relative mb-2">
+    <video controls class="w-full h-auto">
+      <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
+    </video>
+  </div>
+  <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
+</figure>
 
 ## How does Cryptomator Hub work?
 
diff --git a/content/presskit/05-videos.de.md b/content/presskit/05-videos.de.md
index 76e1645d4a..6d93427791 100644
--- a/content/presskit/05-videos.de.md
+++ b/content/presskit/05-videos.de.md
@@ -6,26 +6,32 @@ weight: 5
 <div class="flex flex-wrap -mx-3">
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/oIv0n4MYgdw" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator • 1080p • YouTube</figcaption>
+      <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/AIS5vbUAFc0" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator Tutorial: Erste Schritte • 1080p • YouTube</figcaption>
+      <figcaption>Cryptomator Tutorial: Erste Schritte • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
-    <div class="w-full px-3 lg:w-1/2">
+  <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/D14fzrsPCxY" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • YouTube</figcaption>
+      <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
 </div>
diff --git a/content/presskit/05-videos.en.md b/content/presskit/05-videos.en.md
index b8b3d88aa7..7d08729e58 100644
--- a/content/presskit/05-videos.en.md
+++ b/content/presskit/05-videos.en.md
@@ -6,26 +6,32 @@ weight: 5
 <div class="flex flex-wrap -mx-3">
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/oIv0n4MYgdw" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator • 1080p • YouTube</figcaption>
+      <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/g9A0zihHZ14" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator Tutorial: Get Started • 1080p • YouTube</figcaption>
+      <figcaption>Cryptomator Tutorial: Get Started • <a href="https://www.youtube.com/watch?v=g9A0zihHZ14" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
-      <div class="relative aspect-16x9 mb-2">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/D14fzrsPCxY" frameborder="0" allowfullscreen></iframe>
+      <div class="relative mb-2">
+        <video controls class="w-full h-auto">
+          <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
+        </video>
       </div>
-      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • YouTube</figcaption>
+      <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank">YouTube</a></figcaption>
     </figure>
   </div>
 </div>
diff --git a/hugo.toml b/hugo.toml
index 56c3266259..133b59241f 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -116,6 +116,6 @@ block = true
   [[server.headers]]
       for = '/**'
       [server.headers.values]
-        Content-Security-Policy = "default-src 'none'; script-src 'self' 'unsafe-eval' https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/ https://www.google.com/ https://www.gstatic.com/; style-src 'self' 'unsafe-inline' https://*.paddle.com/; img-src 'self' data: https://static.cryptomator.org/ https://i.ytimg.com/ https://*.paddle.com/ https://paddle.s3.amazonaws.com/; connect-src 'self' https://api.cryptomator.org/ https://store.cryptomator.org/ http://localhost:8787/; font-src 'self'; media-src https://static.cryptomator.org/; frame-src https://community.cryptomator.org/ https://www.youtube-nocookie.com/ https://js.stripe.com/ https://*.paddle.com/ https://www.google.com/; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://www.coinpayments.net/; frame-ancestors 'none'"
+        Content-Security-Policy = "default-src 'none'; script-src 'self' 'unsafe-eval' https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/ https://www.google.com/ https://www.gstatic.com/; style-src 'self' 'unsafe-inline' https://*.paddle.com/; img-src 'self' data: https://static.cryptomator.org/ https://i.ytimg.com/ https://*.paddle.com/ https://paddle.s3.amazonaws.com/; connect-src 'self' https://api.cryptomator.org/ https://store.cryptomator.org/ http://localhost:8787/; font-src 'self'; media-src https://static.cryptomator.org/; frame-src https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/ https://www.google.com/; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://www.coinpayments.net/; frame-ancestors 'none'"
         Strict-Transport-Security = "max-age=31536000; includeSubDomains"
         X-Content-Type-Options = "nosniff"
diff --git a/layouts/hub/single.html b/layouts/hub/single.html
index 4d20b8c1db..2eb5fd3866 100644
--- a/layouts/hub/single.html
+++ b/layouts/hub/single.html
@@ -25,9 +25,14 @@ <h2 id="introduction" class="font-headline font-medium text-xl md:text-2xl leadi
     </header>
 
     <div class="max-w-3xl mx-auto mb-12">
-      <div class="relative aspect-16x9">
-        <iframe class="absolute w-full h-full" src="https://www.youtube-nocookie.com/embed/D14fzrsPCxY" frameborder="0" allowfullscreen></iframe>
-      </div>
+      <figure class="rounded shadow bg-white text-center p-2">
+        <div class="relative mb-2">
+          <video controls class="w-full h-auto">
+            <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
+          </video>
+        </div>
+        <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
+      </figure>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

From 650c835b3821bbafedf526b08363ee4050d86fdb Mon Sep 17 00:00:00 2001
From: Julian Raufelder <Julian@Raufelder.com>
Date: Wed, 16 Oct 2024 17:07:56 +0200
Subject: [PATCH 2/4] Add thumbnails for videos

---
 content/blog/2022-11-03-hub-1.0.de.md | 2 +-
 content/blog/2022-11-03-hub-1.0.en.md | 2 +-
 content/presskit/05-videos.de.md      | 7 ++++---
 content/presskit/05-videos.en.md      | 8 ++++----
 layouts/hub/single.html               | 2 +-
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/content/blog/2022-11-03-hub-1.0.de.md b/content/blog/2022-11-03-hub-1.0.de.md
index f5a7d56f68..866740f379 100644
--- a/content/blog/2022-11-03-hub-1.0.de.md
+++ b/content/blog/2022-11-03-hub-1.0.de.md
@@ -16,7 +16,7 @@ Unser kurzes Einführungsvideo zeigt euch mehr über die Grundlagen von Cryptoma
 
 <figure class="rounded shadow bg-white text-center p-2">
   <div class="relative mb-2">
-    <video controls class="w-full h-auto">
+    <video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
       <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
     </video>
   </div>
diff --git a/content/blog/2022-11-03-hub-1.0.en.md b/content/blog/2022-11-03-hub-1.0.en.md
index f03da8aa21..5b4366bfc6 100644
--- a/content/blog/2022-11-03-hub-1.0.en.md
+++ b/content/blog/2022-11-03-hub-1.0.en.md
@@ -16,7 +16,7 @@ Check out our quick introduction video to learn more about the basics.
 
 <figure class="rounded shadow bg-white text-center p-2">
   <div class="relative mb-2">
-    <video controls class="w-full h-auto">
+    <video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
       <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
     </video>
   </div>
diff --git a/content/presskit/05-videos.de.md b/content/presskit/05-videos.de.md
index 6d93427791..b8568972ac 100644
--- a/content/presskit/05-videos.de.md
+++ b/content/presskit/05-videos.de.md
@@ -7,8 +7,9 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto">
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
+          static.cryptomator.org/desktop/get-started.jpeg
         </video>
       </div>
       <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
@@ -17,7 +18,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-de.jpg" class="w-full h-auto">
           <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
         </video>
       </div>
@@ -27,7 +28,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
diff --git a/content/presskit/05-videos.en.md b/content/presskit/05-videos.en.md
index 7d08729e58..6300f3dba7 100644
--- a/content/presskit/05-videos.en.md
+++ b/content/presskit/05-videos.en.md
@@ -7,7 +7,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto">
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
         </video>
       </div>
@@ -17,8 +17,8 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
-          <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-en.jpg" class="w-full h-auto">
+          <source src="https://static.cryptomator.org/desktop/tutorial-en.mp4" type="video/mp4">
         </video>
       </div>
       <figcaption>Cryptomator Tutorial: Get Started • <a href="https://www.youtube.com/watch?v=g9A0zihHZ14" target="blank">YouTube</a></figcaption>
@@ -27,7 +27,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
diff --git a/layouts/hub/single.html b/layouts/hub/single.html
index 2eb5fd3866..66e3235f47 100644
--- a/layouts/hub/single.html
+++ b/layouts/hub/single.html
@@ -27,7 +27,7 @@ <h2 id="introduction" class="font-headline font-medium text-xl md:text-2xl leadi
     <div class="max-w-3xl mx-auto mb-12">
       <figure class="rounded shadow bg-white text-center p-2">
         <div class="relative mb-2">
-          <video controls class="w-full h-auto">
+          <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
             <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
           </video>
         </div>

From 101a858f62e88772b75f20ef1550df90255b9876 Mon Sep 17 00:00:00 2001
From: Julian Raufelder <Julian@Raufelder.com>
Date: Thu, 17 Oct 2024 15:00:11 +0200
Subject: [PATCH 3/4] Remove figure where requested and margin in video

---
 content/blog/2022-11-03-hub-1.0.de.md | 11 +++--------
 content/blog/2022-11-03-hub-1.0.en.md | 11 +++--------
 content/presskit/05-videos.de.md      |  7 +++----
 content/presskit/05-videos.en.md      |  6 +++---
 layouts/hub/single.html               | 11 +++--------
 5 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/content/blog/2022-11-03-hub-1.0.de.md b/content/blog/2022-11-03-hub-1.0.de.md
index 866740f379..797e886ef0 100644
--- a/content/blog/2022-11-03-hub-1.0.de.md
+++ b/content/blog/2022-11-03-hub-1.0.de.md
@@ -14,14 +14,9 @@ Kurz gesagt: Cryptomator Hub ermöglicht die Zugriffsverwaltung für Cryptomator
 
 Unser kurzes Einführungsvideo zeigt euch mehr über die Grundlagen von Cryptomator Hub.
 
-<figure class="rounded shadow bg-white text-center p-2">
-  <div class="relative mb-2">
-    <video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
-      <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
-    </video>
-  </div>
-  <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
-</figure>
+<video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
+  <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
+</video>
 
 ## Wie funktioniert Cryptomator Hub?
 
diff --git a/content/blog/2022-11-03-hub-1.0.en.md b/content/blog/2022-11-03-hub-1.0.en.md
index 5b4366bfc6..e8b474abbf 100644
--- a/content/blog/2022-11-03-hub-1.0.en.md
+++ b/content/blog/2022-11-03-hub-1.0.en.md
@@ -14,14 +14,9 @@ In short: Cryptomator Hub adds access management for your Cryptomator vaults. It
 
 Check out our quick introduction video to learn more about the basics.
 
-<figure class="rounded shadow bg-white text-center p-2">
-  <div class="relative mb-2">
-    <video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
-      <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
-    </video>
-  </div>
-  <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
-</figure>
+<video controls preload="none" poster="https://static.cryptomator.org/blog/hub-quick-introduction.png" class="w-full h-auto">
+  <source src="https://static.cryptomator.org/blog/hub-quick-introduction.mp4" type="video/mp4">
+</video>
 
 ## How does Cryptomator Hub work?
 
diff --git a/content/presskit/05-videos.de.md b/content/presskit/05-videos.de.md
index b8568972ac..423d63a02e 100644
--- a/content/presskit/05-videos.de.md
+++ b/content/presskit/05-videos.de.md
@@ -7,9 +7,8 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
-          static.cryptomator.org/desktop/get-started.jpeg
         </video>
       </div>
       <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
@@ -18,7 +17,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-de.jpg" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-de.jpg" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
         </video>
       </div>
@@ -28,7 +27,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
diff --git a/content/presskit/05-videos.en.md b/content/presskit/05-videos.en.md
index 6300f3dba7..33ec6ecd13 100644
--- a/content/presskit/05-videos.en.md
+++ b/content/presskit/05-videos.en.md
@@ -7,7 +7,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/get-started.jpg" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
         </video>
       </div>
@@ -17,7 +17,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-en.jpg" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/desktop/tutorial-en.jpg" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/desktop/tutorial-en.mp4" type="video/mp4">
         </video>
       </div>
@@ -27,7 +27,7 @@ weight: 5
   <div class="w-full px-3 lg:w-1/2">
     <figure class="rounded shadow bg-white text-center p-2">
       <div class="relative mb-2">
-        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
+        <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto not-prose">
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
diff --git a/layouts/hub/single.html b/layouts/hub/single.html
index 66e3235f47..f3f5e04337 100644
--- a/layouts/hub/single.html
+++ b/layouts/hub/single.html
@@ -25,14 +25,9 @@ <h2 id="introduction" class="font-headline font-medium text-xl md:text-2xl leadi
     </header>
 
     <div class="max-w-3xl mx-auto mb-12">
-      <figure class="rounded shadow bg-white text-center p-2">
-        <div class="relative mb-2">
-          <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
-            <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
-          </video>
-        </div>
-        <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
-      </figure>
+      <video controls preload="none" poster="https://static.cryptomator.org/hub/quick-introduction.png" class="w-full h-auto">
+        <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
+      </video>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

From 964e20ad32873c210585885202c41dafcce8b9e6 Mon Sep 17 00:00:00 2001
From: Tobias Hagemann <tobias.hagemann@skymatic.de>
Date: Fri, 18 Oct 2024 18:37:13 +0200
Subject: [PATCH 4/4] updated presskit videos figcaption

---
 content/presskit/05-videos.de.md | 6 +++---
 content/presskit/05-videos.en.md | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/presskit/05-videos.de.md b/content/presskit/05-videos.de.md
index 423d63a02e..f94036b093 100644
--- a/content/presskit/05-videos.de.md
+++ b/content/presskit/05-videos.de.md
@@ -11,7 +11,7 @@ weight: 5
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator • 1080p • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
@@ -21,7 +21,7 @@ weight: 5
           <source src="https://static.cryptomator.org/desktop/tutorial-de.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator Tutorial: Erste Schritte • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator Tutorial: Erste Schritte • 1080p • <a href="https://www.youtube.com/watch?v=AIS5vbUAFc0" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
@@ -31,7 +31,7 @@ weight: 5
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
 </div>
diff --git a/content/presskit/05-videos.en.md b/content/presskit/05-videos.en.md
index 33ec6ecd13..d0a5db3e68 100644
--- a/content/presskit/05-videos.en.md
+++ b/content/presskit/05-videos.en.md
@@ -11,7 +11,7 @@ weight: 5
           <source src="https://static.cryptomator.org/desktop/get-started.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator • 1080p • <a href="https://www.youtube.com/watch?v=oIv0n4MYgdw" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
@@ -21,7 +21,7 @@ weight: 5
           <source src="https://static.cryptomator.org/desktop/tutorial-en.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator Tutorial: Get Started • <a href="https://www.youtube.com/watch?v=g9A0zihHZ14" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator Tutorial: Get Started • 1080p • <a href="https://www.youtube.com/watch?v=g9A0zihHZ14" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
   <div class="w-full px-3 lg:w-1/2">
@@ -31,7 +31,7 @@ weight: 5
           <source src="https://static.cryptomator.org/hub/quick-introduction.mp4" type="video/mp4">
         </video>
       </div>
-      <figcaption>Cryptomator Hub: Quick Introduction • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank">YouTube</a></figcaption>
+      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • <a href="https://www.youtube.com/watch?v=D14fzrsPCxY" target="blank" rel="noopener">YouTube</a></figcaption>
     </figure>
   </div>
 </div>