I have a simple bookmarklet does does something similar:
javascript:(function(){document.querySelectorAll("video").forEach(((e,o)=>{console.log(`VideoFixer: Processing <video> #${o+1}:`,e),e.style.position="relative",e.style.zIndex="999999",e.controls=!0,e.style.pointerEvents="auto";const t=[],i=[];["disablePictureInPicture","disableRemotePlayback"].forEach((o=>{e.hasAttribute(o)&&(t.push(o),e.removeAttribute(o))})),e.hasAttribute("controlsList")&&(i.push(...e.getAttribute("controlsList").split(/\\s+/)),e.removeAttribute("controlsList")),t.length&&console.log(`VideoFixer: Removed attributes: ${t.join(", ")}`),i.length&&console.log(`VideoFixer: Removed controlsList restrictions: ${i.join(", ")}`),t.length||i.length||console.log("VideoFixer: No restrictions found to remove.")})),console.log("VideoFixer: All videos processed.");}());
It just re-enables all controls on all <video> elements and uses z-indexing to push them to the top. Works on instagram but needs to be re-ran for new video elements.
That can be configured to run automatically on every site, and it uses the MutationObserver API to automatically fix any newly added/modified <video> elements on the page. Seems to work on Snapchat and Instagram so far, but breaks some functionality. Op's chrome extension, with bespoke support for Instagram, likely offers a much better experience. This is just more universal.
Ah that's a good idea! Similar effect to this but I guess packaging it in a chrome extension lends itself to "set it and forget it". I also have some customization options.
It's also a security risk though, as in someone could take it over and push a bad update at any time... I have a few extensions installed but I'm terrified of adding more, even though there are parts of my browsing experience that could be significantly improved.
I really wish there were a middle ground, like an external extension manager where you could opt into updates, with reproducible builds, changelogs, etc.
My mitigation for this:
Any extension that I grant serious permissions, I copy it locally, and then install that copy. This effectively disables all updates! Still requires I trust the extension as is, but doesn't require I trust the extension developers forever. And I use this [1] extension to easily download the source for any other extension.
You could add it from source which is pretty easy to do but you lose chrome’s syncing feature.
Having said that I haven’t developed a chrome extension in years. They are so strict now. I know they can’t manually inspect each line but I do hope it helps solve the problem of extensions going rogue.
Relatedly, I have a greasemonkey script[1] that makes Snapchat on web much more usable. I just updated it to include this video fixer logic so now it's easy to scrobble videos and download them.
It uses the MutationObserver API to immediately 'fix' any <video> element added to the page. Really I should just copy you and make a version of it that just does the video fixing but runs on every site. It's crazy how browsers have a nice built in pro-user video element, but that every site intentionally overrides and degrades it...
That's great. The one site I definitely need it on is instagram whenever I happen to open a reel on web. And I'd like it on reddit because its video player sucks, but it just adds it on top of it so I have now ended up disabling it everywhere else.
YouTube shorts does have its own progress bar, but it's proprietary and kept out of view and so it doesn't allow the user to tell the length of the video at a glance.
Tiktok used to do it based on length, is it something like that? I've noticed having it on desktop more often than mobile on YouTube shorts, maybe never on mobile browsers.
mpv understands URLs to these websites and uses yt-dlp to download them.
On KDE, I assigned an action to open some URLs with mpv, which means I can play then from the clipboard manager or the copy menu that is displayed when copying if it's enabled.
Instant download. Works great. Perhaps on Instagram you can make it save the audio level when the video is muted? If I mute a video then scroll to the next one, the audio still plays. Otherwise, thanks for making this, it's something I've wanted for a long time.
It seems a bit flakey on mobile, but it was a nice addition to the other enhancements. I haven't been able to make the mobile web as useful as the desktop web version, but didn't want to spend too much time on it either.
Thanks for releasing it! Whats the chance of this getting shipped to Firefox users? A future improvement might be to add the ability to change the playback speed :)
And perhaps allow 3x playback speed. It's too fast for me to understand speech on most videos but not all. But some videos are so long winded that it can be tremendously helpful.
You actually can control playback speed! You can find this on the bottom right of the videos. It doesn't go to 3x though and you can't access it on youtube unless it's in fullscreen for some reason. Will try to figure that out.
My pleasure! It was fun to build and didn't take too much time to do the individual platforms. So, if it breaks for one then patching it up should be pretty quick. Please leave a review if it's helpful to you.
Yeah - that extension seems to just update <video> elements to have the showcontrols attribute if they're missing. Doing that isn't enough for insta, youtube etc because you need to mess with their propriatary html.
Adding a progress bar back might cause people to just skip to the part they want to see instead of watching the whole thing again though, and I'm worried that might not be in the best interests of the content creator or advertisers.
Without a license your repo is technically not open-source, only source-available. A license says what people are allowed to do with the code, so if you don't add a license, they're not allowed to do anything.
Having a license clarifies what permissions are you giving to someone who downloads your code. The practical benefit is that others can clearly contribute back or build on your work without any legal concerns.
Something like MIT gives them permission to do anything as long as attribution is maintained, while avoiding liabilities.
Without a license, legaly nobody can do anything with the code. The license is essentially the way that you communicate what you will allow people to do with it.
For a project like this, I would strongly recommend an MIT license. That will essentially allow people to use the code and modify it, contribute back to it, and otherwise distribute their changes.
I have a simple bookmarklet does does something similar:
It just re-enables all controls on all <video> elements and uses z-indexing to push them to the top. Works on instagram but needs to be re-ran for new video elements.I turned this into a greasemonkey script: https://greasyfork.org/en/scripts/531780-universal-video-fix...
That can be configured to run automatically on every site, and it uses the MutationObserver API to automatically fix any newly added/modified <video> elements on the page. Seems to work on Snapchat and Instagram so far, but breaks some functionality. Op's chrome extension, with bespoke support for Instagram, likely offers a much better experience. This is just more universal.
Ah that's a good idea! Similar effect to this but I guess packaging it in a chrome extension lends itself to "set it and forget it". I also have some customization options.
I've tried to send bookmarklets to my family and they never "get" them. An extension like this is perfect. Thanks for your work!
It's also a security risk though, as in someone could take it over and push a bad update at any time... I have a few extensions installed but I'm terrified of adding more, even though there are parts of my browsing experience that could be significantly improved.
I really wish there were a middle ground, like an external extension manager where you could opt into updates, with reproducible builds, changelogs, etc.
My mitigation for this: Any extension that I grant serious permissions, I copy it locally, and then install that copy. This effectively disables all updates! Still requires I trust the extension as is, but doesn't require I trust the extension developers forever. And I use this [1] extension to easily download the source for any other extension.
[1] https://chromewebstore.google.com/detail/chrome-extension-so...
You could add it from source which is pretty easy to do but you lose chrome’s syncing feature.
Having said that I haven’t developed a chrome extension in years. They are so strict now. I know they can’t manually inspect each line but I do hope it helps solve the problem of extensions going rogue.
This is great. I just asked ChatGPT to convert it into a script that I could use with Violentmonkey.
Nice! I still use Greasemonkey and love it.
Relatedly, I have a greasemonkey script[1] that makes Snapchat on web much more usable. I just updated it to include this video fixer logic so now it's easy to scrobble videos and download them.
It uses the MutationObserver API to immediately 'fix' any <video> element added to the page. Really I should just copy you and make a version of it that just does the video fixing but runs on every site. It's crazy how browsers have a nice built in pro-user video element, but that every site intentionally overrides and degrades it...
edit: I went ahead and turned this into a greasemonkey script as well: https://greasyfork.org/en/scripts/531780-universal-video-fix...
[1] https://greasyfork.org/en/scripts/468156-unbreak-snapchat-we...
That's great. The one site I definitely need it on is instagram whenever I happen to open a reel on web. And I'd like it on reddit because its video player sucks, but it just adds it on top of it so I have now ended up disabling it everywhere else.
For youtube shorts, replacing the "shorts" in URL with "watch" will give you the usual interface, for example:
https://www.youtube.com/shorts/GqkmtcirwYA -> https://www.youtube.com/watch/GqkmtcirwYA
But actually I see that seek bar is already available in youtube shorts. Maybe it's a recent change?
YouTube shorts does have its own progress bar, but it's proprietary and kept out of view and so it doesn't allow the user to tell the length of the video at a glance.
I've noticed the seek bar is available in MOST but not ALL shorts. I always thought it might be an option by the video owner.
I'd say it's more likely youtube A/B testing to see if they can increase engagement with that bar disabled.
Tiktok used to do it based on length, is it something like that? I've noticed having it on desktop more often than mobile on YouTube shorts, maybe never on mobile browsers.
It's horrible that the web has come to this, a need for a browser hack to restore the UI that some website hacked off.
Product designers are going to experiment...Vote with your feet. Don't use horrible products. The only thing worse would be EU mandated progress bars
I would love to vote with my feet. How do I watch YouTube or Instagram content with VLC, or some other user friendly video player?
Look into LibRedirect and the projects it uses and also things like youtube-dl/yt-dlp.
https://libredirect.github.io/
https://libredirect.codeberg.page/
> A web extension that redirects YouTube, Instagram, Reddit, TikTok and other websites to alternative privacy-friendly frontends.
https://github.com/mendel5/alternative-front-ends
https://github.com/digitalblossom/alternative-frontends
https://www.privacyguides.org/en/frontends/
https://news.ycombinator.com/item?id=36146076
mpv understands URLs to these websites and uses yt-dlp to download them.
On KDE, I assigned an action to open some URLs with mpv, which means I can play then from the clipboard manager or the copy menu that is displayed when copying if it's enabled.
At least users can [for now] do this on the web! Try fixing poor UI on a locked-down native mobile app.
An answer to my wishes ... https://news.ycombinator.com/item?id=43398696 thank you!
You're welcome! I knew I couldn't be the only one.
Instant download. Works great. Perhaps on Instagram you can make it save the audio level when the video is muted? If I mute a video then scroll to the next one, the audio still plays. Otherwise, thanks for making this, it's something I've wanted for a long time.
Oh nice catch, I'll get onto that asap. Edit: This will be fixed in the next update.
I wrote a set of uBo rules to do the same on TikTok. Not sure if they still work, but might as well publish it:
tiktok.com##sharing-main-video-el:watch-attr(controlslist):remove-attr(controlslist)
It seems a bit flakey on mobile, but it was a nice addition to the other enhancements. I haven't been able to make the mobile web as useful as the desktop web version, but didn't want to spend too much time on it either.
For anyone looking: Safari has "Stop The Madness" which has something similar (and much more).
That looks pretty useful. A Firefox release would be most appreciated.
Working on it, I have a lot on atm but I'll reply to comments in this thread requesting FF once I have it out.
Thanks for releasing it! Whats the chance of this getting shipped to Firefox users? A future improvement might be to add the ability to change the playback speed :)
Nice idea. Playback rate should be pretty easy to implement!
I've never done a Firefox extension before but I could definitely give it a go.
And perhaps allow 3x playback speed. It's too fast for me to understand speech on most videos but not all. But some videos are so long winded that it can be tremendously helpful.
You actually can control playback speed! You can find this on the bottom right of the videos. It doesn't go to 3x though and you can't access it on youtube unless it's in fullscreen for some reason. Will try to figure that out.
I've made these for TikTok/Instagram:
https://chromewebstore.google.com/detail/video-scrubber-for-...
https://addons.mozilla.org/en-US/firefox/addon/video-scrubbe...
https://chromewebstore.google.com/detail/video-controls-for-...
https://microsoftedge.microsoft.com/addons/detail/video-cont...
Thanks for this. I've thought about building this exact thing ever since this vicious trend began.
My pleasure! It was fun to build and didn't take too much time to do the individual platforms. So, if it breaks for one then patching it up should be pretty quick. Please leave a review if it's helpful to you.
The worst thing is that you don't know if a video is 15 seconds or 3 minutes. This is great. Thank you!
Been using this extension to turn shorts back into regular videos for years: https://github.com/raven0230/Remove-Youtube-Shorts
That way not only do you get the seek/pause controls back, but other stuff like volume, comments, keyboard shortcuts etc. now work as usual too.
Nice. Does this do more than the "Show Video Controls by Default" extension? https://chromewebstore.google.com/detail/show-video-controls...
Yeah - that extension seems to just update <video> elements to have the showcontrols attribute if they're missing. Doing that isn't enough for insta, youtube etc because you need to mess with their propriatary html.
I haven't tried this out but if it works it's one the biggest bang for the buck I've seen on HN. Thanks!
is there a way to "save" a volume for instagram/youtube? i swear their volume is boosted to 200% volume
Just finished that feature. Volume saving is available now on youtube and insta if you update.
Adding a progress bar back might cause people to just skip to the part they want to see instead of watching the whole thing again though, and I'm worried that might not be in the best interests of the content creator or advertisers.
> I'm worried that might not be in the best interests of the content creator or advertisers.
My heart bleeds for them.
In other words, this remove slop creators' ability to waste a minute of my life with bait. How is that not a good thing?
But think of the economy!
Thank you for that. Helps a lot!
My pleasure.
Thanks for sharing! Also, would you mind adding a license to your gh repo?
No problem. Yes, I never thought of that! What is the practical benefit of having a license here and which one should I choose?
Without a license your repo is technically not open-source, only source-available. A license says what people are allowed to do with the code, so if you don't add a license, they're not allowed to do anything.
That's great, I've added an MIT license. https://github.com/darajava/reel-control/commit/4d014f578b93...
Having a license clarifies what permissions are you giving to someone who downloads your code. The practical benefit is that others can clearly contribute back or build on your work without any legal concerns.
Something like MIT gives them permission to do anything as long as attribution is maintained, while avoiding liabilities.
But there are others you can pick: https://choosealicense.com/
Thank you! MIT license added. https://github.com/darajava/reel-control/commit/4d014f578b93...
Without a license, legaly nobody can do anything with the code. The license is essentially the way that you communicate what you will allow people to do with it.
For a project like this, I would strongly recommend an MIT license. That will essentially allow people to use the code and modify it, contribute back to it, and otherwise distribute their changes.
This is a cool idea. Good job!