diff options
| author | Adam Soltys <[email protected]> | 2026-09-12 21:50:55 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-12 21:50:55 -0700 |
| commit | 6b396dc26c05a921e2387e16343a8e0e6adea9fb (patch) | |
| tree | 6a7588fffde67727cd11356afc4e2d3f47237ec4 /src/style.css | |
| parent | 31d6dd340cac259ff556001c3045b2d6e748a2e0 (diff) | |
| download | coinosv3-6b396dc26c05a921e2387e16343a8e0e6adea9fb.tar.gz coinosv3-6b396dc26c05a921e2387e16343a8e0e6adea9fb.zip | |
A YouTube link in a post shows the video.
All three shapes it comes in — youtube.com/watch?v=, youtu.be/, and a Shorts
link — become the video's still with a play button on it and a corner link
out to YouTube. A ?t= keeps its start time. Anything that merely looks like
one (example.com/watch?v=…) stays a link.
The player itself arrives on the first tap, not on render. A feed of ten
videos would otherwise load ten YouTube players, each one telling Google what
you're scrolling past before you've decided to watch anything — and on a
phone, ten players is the scroll. One tap and it plays in place, from
youtube-nocookie.com.
Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 9ea8b39..a03d25e 100644 --- a/src/style.css +++ b/src/style.css @@ -581,6 +581,34 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .lightbox-x:hover { background: rgba(255, 255, 255, .24); } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } .note-video { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin-top: 6px; background: #000; } +/* A YouTube link, shown as the video it is: the still, a play button, and a + corner link out. The player replaces all of it on the first tap — see + youtubeEmbed for why it isn't there from the start. */ +.yt-embed { + position: relative; margin-top: 6px; border-radius: 10px; overflow: hidden; + background: #000; aspect-ratio: 16 / 9; max-width: 100%; +} +.yt-embed img.yt-poster, .yt-embed iframe { + display: block; width: 100%; height: 100%; border: 0; + object-fit: cover; /* hqdefault is 4:3 with bars; cover trims them */ +} +.yt-play { + position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; + display: flex; align-items: center; justify-content: center; cursor: pointer; + background: rgba(0, 0, 0, .18); color: #fff; +} +.yt-play > span { + width: 62px; height: 44px; border-radius: 11px; background: rgba(18, 18, 18, .78); + display: flex; align-items: center; justify-content: center; padding-left: 3px; + transition: background .12s; +} +.yt-play:hover { background: rgba(0, 0, 0, .28); } +.yt-play:hover > span { background: #e00; } +.yt-open { + position: absolute; top: 6px; right: 8px; color: #fff; font-size: 15px; line-height: 1; + padding: 4px 7px; border-radius: 8px; background: rgba(18, 18, 18, .6); text-decoration: none; +} +.yt-open:hover { background: rgba(18, 18, 18, .85); text-decoration: none; } /* the profile notes feed: page-scrolled (no inner scrollbox); on phones it runs edge to edge — the card walls step outside #app's padding */ .notes-feed { padding: 2px 14px; } |