diff options
| author | Adam Soltys <[email protected]> | 2026-09-23 23:00:31 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-23 23:00:31 -0700 |
| commit | f6fd9f998831330e3a8819e294cdd8d15c1a87f6 (patch) | |
| tree | 3d8399d75efffc9c9bd091280984c8776682cd05 /src/style.css | |
| parent | 75679fdd5d24d36e3c54316e88ccefcf954afc82 (diff) | |
| download | coinosv3-f6fd9f998831330e3a8819e294cdd8d15c1a87f6.tar.gz coinosv3-f6fd9f998831330e3a8819e294cdd8d15c1a87f6.zip | |
Videos play by themselves, muted, while on screen — with an Unmute button; YouTube too.
An inline video starts as it scrolls into view (muted, the only way a
browser lets a page start one), pauses as it leaves, and a corner button
turns the sound on; the native controls' own mute keeps the button honest.
A YouTube box loads its player muted once in view (enablejsapi, so the
same button can unmute it over the iframe API) and pauses out of view; a
tap on the poster still means sound. One IntersectionObserver watches
every player. Data Saver keeps tap-to-play.
Tests adapted to the feed's new admission rule (a row waits for its
author's face and pictures): the markdown and post-actions tests seed the
poster's profile and serve their pictures locally; a picture that cannot
be decoded is now a link, by design.
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index fc1f384..311f6a2 100644 --- a/src/style.css +++ b/src/style.css @@ -711,6 +711,16 @@ 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 video plays by itself, muted, while it is on screen; the corner button + turns the sound on (see autoplay in messages.js) */ +.note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; } +.note-video-box .note-video { margin-top: 0; } +.vid-sound { + position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0; + border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3; + cursor: pointer; display: inline-flex; align-items: center; gap: 5px; +} +.vid-sound:hover { background: rgba(18, 18, 18, .9); } /* A quoted note, inside the post that quotes it: its own little card, so the two voices don't run together. Context, not another post to act on — the action row stops at the outer post. */ |