fix(embed): transparent video background and correct logo color

- Add `bg-transparent` to `#embedVideo` to fix visual gap/letterboxing issues.
- Inline the BitVid logo SVG in `embed.html` and use `bv-logo` class with `data-variant="inverse"` to ensure correct white wordmark and themed accent color on the dark overlay.
This commit is contained in:
google-labs-jules[bot] committed 2026-01-24 23:35:45 +00:00
1 parent 3de86b3b4d
commit 4264a1ed0e
4 files changed
+39 -503

No files matched your search

+39 -6
View File
@@ -79,7 +79,7 @@
>
<video
id="embedVideo"
class="h-full w-full object-contain"
class="h-full w-full object-contain bg-transparent"
controls
playsinline
preload="metadata"
@@ -98,11 +98,44 @@
class="flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-white/20 backdrop-blur-md"
>
<span>Watch on</span>
<img
src="assets/svg/bitvid-logo-light-mode.svg"
alt="BitVid"
class="h-4 w-auto invert"
/>
<svg
class="bv-logo h-4 w-auto"
data-variant="inverse"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 318.32 108.98"
>
<g class="bv-logo__accent">
<rect x="7.1" y="7.8" width="5.84" height="5.48" />
<rect x="7.1" y="18.78" width="24.02" height="5.48" />
<rect x="7.1" y="29.77" width="42.85" height="5.48" />
<rect x="7.1" y="40.76" width="61.68" height="5.48" />
<rect x="7.1" y="51.75" width="80.88" height="5.48" />
<rect x="7.1" y="62.74" width="61.68" height="5.48" />
<rect x="7.1" y="73.73" width="42.85" height="5.48" />
<rect x="7.1" y="84.72" width="24.02" height="5.48" />
<rect x="7.1" y="95.71" width="5.84" height="5.48" />
</g>
<g class="bv-logo__wordmark">
<path
d="M121.28 25.08v44.54c0 5.67 2.79 8.54 8.22 8.54h11.57c5.51 0 8.3-2.87 8.3-8.54v-13.09c0-5.67-2.79-8.46-8.3-8.46h-16.6v-5.83h17.72c8.7 0 13.01 4.47 13.01 13.33v15.01c0 8.86-4.31 13.33-13.01 13.33h-13.73c-8.7 0-13.01-4.47-13.01-13.33V25.08h5.83Z"
/>
<path
d="M168.53 25.08v6.26h-5.83v-6.26h5.83Zm0 17.56v41.27h-5.83v-41.27h5.83Z"
/>
<path
d="M191.36 25.08v17.16h9.02v5.19h-9.02v36.48h-5.83v-36.48h-9.82v-5.19h9.82V25.08h5.83Z"
/>
<path
d="M212.88 42.24l16.84 35.68 16.6-35.68h6.07l-19.56 41.67h-6.31l-20.04-41.67h6.39Z"
/>
<path
d="M264.05 25.08v6.26h-5.83v-6.26h5.83Zm0 17.16v41.67h-5.83v-41.67h5.83Z"
/>
<path
d="M311.21 25.08v45.5c0 8.86-4.31 13.33-13.01 13.33h-13.73c-8.7 0-13.01-4.47-13.01-13.33v-15.01c0-8.86 4.31-13.33 13.01-13.33h17.72v5.83h-16.6c-5.51 0-8.3 2.79-8.3 8.46v13.09c0 5.67 2.79 8.54 8.3 8.54h11.49c5.51 0 8.3-2.87 8.3-8.54V25.08h5.83Z"
/>
</g>
</svg>
</a>
<div