{"id":32035962,"url":"https://github.com/imkyssa/twitter-video-modal-hover","last_synced_at":"2026-04-17T06:32:06.943Z","repository":{"id":318849157,"uuid":"1076677839","full_name":"imkyssa/twitter-video-modal-hover","owner":"imkyssa","description":"A userscript that enhances Twitter / X by displaying videos in a hover-activated modal preview — smooth, high-resolution, and completely blob-safe.","archived":false,"fork":false,"pushed_at":"2025-10-15T08:35:24.000Z","size":8993,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-28T21:35:25.843Z","etag":null,"topics":["canvas","hover","hover-effects","javascript","modal","tampermonkey","twitter","userscript","video","x"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imkyssa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-15T07:41:06.000Z","updated_at":"2025-10-15T08:35:28.000Z","dependencies_parsed_at":"2025-10-16T19:04:41.408Z","dependency_job_id":"daf02e42-c01b-4198-b8e2-f701fa5ed4b4","html_url":"https://github.com/imkyssa/twitter-video-modal-hover","commit_stats":null,"previous_names":["imkyssa/twitter-video-modal-hover"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imkyssa/twitter-video-modal-hover","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imkyssa%2Ftwitter-video-modal-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imkyssa%2Ftwitter-video-modal-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imkyssa%2Ftwitter-video-modal-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imkyssa%2Ftwitter-video-modal-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imkyssa","download_url":"https://codeload.github.com/imkyssa/twitter-video-modal-hover/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imkyssa%2Ftwitter-video-modal-hover/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31918479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","hover","hover-effects","javascript","modal","tampermonkey","twitter","userscript","video","x"],"created_at":"2025-10-17T07:38:11.807Z","updated_at":"2026-04-17T06:32:06.936Z","avatar_url":"https://github.com/imkyssa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎥 Twitter Video Modal Hover\n\nA userscript that enhances **Twitter / X** by displaying videos in a **hover-activated modal preview** — smooth, high-resolution, and completely blob-safe.\n\n⚡ Built for Tampermonkey.  \n🔥 Works seamlessly with X’s virtual DOM and lazy-loaded media.\n\n---\n\n## 🪄 Demo\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./demo.gif\" alt=\"Demo Preview\" width=\"900\" style=\"border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.3);\"\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n✅ Canvas-based live mirroring (no `blob:` errors)  \n✅ Hover to enlarge — no clicks required  \n✅ Dark overlay background with smooth scale animation  \n✅ ESC / click-outside to close  \n✅ Custom UI controls (Play / Pause / Time)  \n✅ Hover indicator + subtle transitions  \n✅ MutationObserver-based auto-binding for infinite scroll  \n✅ Performance-friendly (doesn’t reflow or clone DOM nodes)\n\n---\n\n## 🧠 Technical Highlights\n\n- **Blob-safe rendering:**  \n  X’s videos use temporary `blob:` URLs, which normally break when detached.  \n  This script mirrors the video frames directly into a `\u003ccanvas\u003e` — no DOM transfer, no fetch errors.\n\n- **Virtual DOM compatible:**  \n  React re-renders and tweet updates don’t interfere.\n\n- **Custom UI Layer:**  \n  Includes close button, playback controls, and a live timer.\n\n- **Dynamic Detection:**  \n  Uses a throttled `MutationObserver` to detect new tweets in real-time.\n\n---\n\n## 🚀 Installation\n\n1. Install the [**Tampermonkey** extension](https://tampermonkey.net/).  \n2. Click **Create a new script**.  \n3. Replace everything with the content of  \n   [`twitter-video-modal-hover.user.js`](./twitter-video-modal-hover.user.js).  \n4. Save (`Ctrl + S`) and reload **Twitter / X**.  \n5. Hover over any video and enjoy the smooth modal preview! 🎬\n\n---\n\n## 💻 Browser Compatibility\n\n| Browser | Support |\n|----------|----------|\n| Chrome | ✅ |\n| Edge | ✅ |\n| Firefox | ✅ |\n| Brave | ✅ |\n| Opera | ✅ |\n| Safari (Tampermonkey Beta) | ⚠️ Experimental |\n\n---\n\n## 🧩 Why It’s Different\n\nMost “hover video preview” scripts fail on X because of:\n- `blob:` video URLs that vanish outside their scope  \n- `pointer-events: none` wrappers  \n- React’s dynamic DOM recycling  \n\nThis script solves all of them — by rendering the video onto a canvas overlay in real-time.  \nEffectively, it acts as a **mini mirroring video engine** built on top of Twitter’s player.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimkyssa%2Ftwitter-video-modal-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimkyssa%2Ftwitter-video-modal-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimkyssa%2Ftwitter-video-modal-hover/lists"}