Skip to content

fix(site): make YouTube demo thumbnail clickable #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codeforstartups merged 1 commit into from
Sep 30, 2026
Merged

fix(site): make YouTube demo thumbnail clickable #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions opensource/dynavec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,12 @@ <h1 class="hero__title">The serverless vector database<br />that lives in <span
</div><!-- /hero__col -->

<div class="hero__media">
<div class="yt-facade" id="yt-facade" role="button" tabindex="0" aria-label="Play dynavec demo video">
<a class="yt-facade" id="yt-facade" href="https://www.youtube.com/watch?v=UJ9MBALD380" target="_blank" rel="noopener noreferrer" aria-label="Watch dynavec demo video (opens in a new tab)">
<img class="yt-facade__thumb" src="https://img.youtube.com/vi/UJ9MBALD380/maxresdefault.jpg" alt="dynavec demo video thumbnail" loading="lazy" />
<button class="yt-facade__play" aria-hidden="true">
<span class="yt-facade__play" aria-hidden="true">
<svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.5 7.7a8.5 8.5 0 0 0-6-6C56 0 34 0 34 0S12 0 7.5 1.7a8.5 8.5 0 0 0-6 6C0 12.1 0 24 0 24s0 11.9 1.5 16.3a8.5 8.5 0 0 0 6 6C12 48 34 48 34 48s22 0 26.5-1.7a8.5 8.5 0 0 0 6-6C68 35.9 68 24 68 24s0-11.9-1.5-16.3z" fill="#ff0000"/><path d="M27 34l18-10-18-10v20z" fill="#fff"/></svg>
</button>
</div>
</span>
</a>
</div>
</div><!-- /hero__grid -->

Expand Down
10 changes: 2 additions & 8 deletions opensource/dynavec/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -765,8 +765,9 @@ body {
height: 100%;
}

/* YouTube facade — canvas bg + thumbnail + play button, iframe loads on click */
/* YouTube facade — thumbnail link with a decorative play icon */
.yt-facade {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
Expand Down Expand Up @@ -800,13 +801,6 @@ body {
transition: transform 0.15s;
}
.yt-facade:hover .yt-facade__play { transform: scale(1.1); }
.yt-facade iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}

.canvas-label {
position: absolute;
Expand Down
Loading