fix: use video component (#81)

adds a video component
zkSync-Community-Hub · Sep 25, 2024 · f5ee6bc · f5ee6bc
1 parent 888b43c
commit f5ee6bc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/assets/webauthn-demo.mp4 b/assets/webauthn-demo.mp4
diff --git a/components/InlineVideo.vue b/components/InlineVideo.vue
@@ -0,0 +1,13 @@
+<template>
+  <video
+    style="clip-path: inset(2px 2px)"
+    width="100%"
+    height="100%"
+    controls
+  >
+    <source
+      src="~/assets/webauthn-demo.mp4"
+      type="video/mp4"
+    />
+  </video>
+</template>
diff --git a/content/tutorials/signing-transactions-with-webauthn/10.index.md b/content/tutorials/signing-transactions-with-webauthn/10.index.md
@@ -27,9 +27,7 @@ To break this down, the app will allow users to:
 - Use WebAuthn to mint an NFT.
 - Have gasless transactions.
 
-<video style="clip-path:inset(2px 2px);" width="100%" height="100%" controls>
-  <source src="/videos/webauthn-demo.mp4" type="video/mp4">
-</video>
+:inline-video
 
 You can find the completed code inside the [Community Code repo](https://github.com/zkSync-Community-Hub/community-code/code/webauthn).
 

diff --git a/public/videos/webauthn-demo.mp4 b/public/videos/webauthn-demo.mp4