fix(website): refine hero video styling and attributes

- Move video source to src attribute and add preload="auto"
- Update aspect ratio from 16/10 to standard 16/9
- Change object-position to center bottom
- Apply border-radius to match the container element
This commit is contained in:
2026-02-24 19:18:09 +01:00
parent efc37bda27
commit d32041abe2
+1 -2
View File
@@ -45,8 +45,7 @@ const version = pkg.version ?? "";
<!-- Screenshot Reveal --> <!-- Screenshot Reveal -->
<div class="container" style="margin-top: var(--space-2xl); position: relative; z-index: 2;"> <div class="container" style="margin-top: var(--space-2xl); position: relative; z-index: 2;">
<div style="border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,221,119,0.1); background: var(--color-bg-elevated); padding: 2px;"> <div style="border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,221,119,0.1); background: var(--color-bg-elevated); padding: 2px;">
<video autoplay loop muted playsinline style="width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: bottom; display: block;"> <video src="/zblade.mp4" autoplay loop muted playsinline preload="auto" style="width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center bottom; display: block; border-radius: var(--border-radius);">
<source src="/zblade.mp4" type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</div> </div>