Merge branch 'feature/videos' into develop

cryptomator · Oct 18, 2024 · 2aa0048 · 2aa0048
2 parents ac61a31 + 964e20a
commit 2aa0048
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 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
@@ -14,9 +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.
 
-<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>
+<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
@@ -14,9 +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.
 
-<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>
+<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
@@ -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 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>
-      <figcaption>Cryptomator • 1080p • YouTube</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">
     <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 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>
-      <figcaption>Cryptomator Tutorial: Erste Schritte • 1080p • YouTube</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">
+  <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 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>
-      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • YouTube</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
@@ -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 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>
-      <figcaption>Cryptomator • 1080p • YouTube</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">
     <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 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>
-      <figcaption>Cryptomator Tutorial: Get Started • 1080p • YouTube</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">
     <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 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>
-      <figcaption>Cryptomator Hub: Quick Introduction • 2160p • YouTube</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/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
@@ -25,9 +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">
-      <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>
+      <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">