dnrops
/
datastar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add play button [deploy-site]

This commit is contained in:
Ben Croker 2025-04-04 11:03:11 -06:00
parent 72a3e28fea
commit c780ded239
No known key found for this signature in database
GPG Key ID: 09D799816F1CF332
2 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
site/routes_videos.templ
View File

@ -19,8 +19,9 @@ templ PageVideos(r *http.Request, videos ...Video) {
thumbnail := "https://img.youtube.com/vi/" + video.Code + "/maxresdefault.jpg"
title := video.Title
}}
<div id={ id } data-on-click={ action } title={ title } class="w-full max-w-xl aspect-video cursor-pointer">
<div id={ id } data-on-click={ action } title={ title } class="w-full max-w-xl aspect-video cursor-pointer video-wrapper relative">
<img src={ thumbnail } alt={ title } class="w-full h-full"/>
<button class="play-button" aria-label="Play video"></button>
</div>
}
</div>

33
site/src/css/site.css
View File

@ -53,3 +53,36 @@ pre code {
.prose ol, .prose ul {
margin: 0 !important;
}
.video-wrapper .play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: background 0.3s, box-shadow 0.3s;
pointer-events: none; /* For poster-based videos, we rely on the poster click */
}
.video-wrapper .play-button::before {
content: '';
display: block;
width: 0;
height: 0;
margin-left: 2px; /* Nudge right for visual centering */
border-left: 18px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.video-wrapper:hover .play-button {
background: rgba(255, 255, 255, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}