feat(blog): add lazy-loaded looping video shortcode - #173
Merged
Conversation
Adds a `loop-video` shortcode for silent, looping demo clips, and uses it to show the codify-clickops-iac skill in action on the click-ops post. The clip stays inert until the reader scrolls to it: the sources carry `data-lv-src` rather than a real `src`, so a reader who never reaches it downloads zero video bytes. It then plays muted on repeat while on screen and pauses when it scrolls away or the tab is hidden. Includes a custom scrub bar (play/pause, elapsed time, played-over-buffered progress) with click-to-toggle on the picture, drag and keyboard seeking, and a poster that holds the frame's aspect ratio so nothing shifts on load. H.264 MP4 only, audio stripped at encode time. Documented in docs/videos.md.
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The two `text.replace` calls with inline arguments sat past 80 columns, where oxlint's formatter wants them joined and prettier wants them wrapped, so `trunk fmt` looped and `trunk check` failed the file. This predates the shortcode change but only surfaced in CI once the file was touched. Hoist the patterns to constants and the URL rewriter to a named function so every line fits inside 80 columns and both formatters leave it alone.
Space and Enter now start and stop the clip while it has focus, matching how video players behave. The video takes a tabindex so it can be focused, and a click focuses it so click-then-space works without tabbing. The key is only intercepted while the video holds focus, so space still scrolls the page everywhere else. The focus ring is drawn inset, since the frame clips overflow, and uses the teal highlight so it reads over both the light and dark halves of a screen recording.
gberenice
approved these changes
Aug 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
loop-videoshortcode for silent, looping demo clips, used on the click-ops post to show the skill in action. Documented indocs/videos.md.