Hide/blur translation in "Video File" playback mode

Request
1

Hello,

I really like the feature of hiding subtitles on netflix by blurring them. I was hoping that this option to blur the translation could become available in the beta “Video File” feature where you can play your own mp4+subtitle.

Additionally - I would like it if there was an option to use your own translation file rather than using machine translation in the “Video File” feature, if I have an .srt in both English and my target language.

Thank you,
Will Timkey

Thank you

2 Likes
2

I hope this option will be available soon!
I really miss this simple functionality!

3

Btw it’s not difficult to hide the translation under the video in “Video File” mode.

  1. Install User CSS extension for Google Chrome from here: User CSS
  2. Open Language Reactor
  3. Click icon {CSS} for open User CSS extension bar and add CSS code:
/* switch off translation under video */
.main-translation-wrap{
  display: none;
}
  1. Click icon {CSS} again for close User CSS extension bar.
  2. Reload html page. (Ctrl+F5)
  3. Look at CSS extension icon (it mast be green).
  4. Open your video and subtitles.
  5. That’s all. Now you can hide or show the translation under the video use toggle on top User CSS extension bar. You can hide User CSS extension bar but it will be working.
4

I actually do use a script at the moment to hide the subtitles. However as you probably know it’s not quite the same. I really like being able to just hover over the translation. I could try to write a more involved script but ideally they will add this feature before I have to do that!

5

You can use this CSS code to show translation while mouse above the sentence:

/* switch off translation under video */
.main-translation-wrap{
  display: none;
}
/* show translation while mouse above the sentence */
.sentence-wrap-main:hover~.main-translation-wrap{
  display: block;
}
1 Like
6

I’d like to cast my vote for these features as well. Just tried using the video file player for the first time today and was immediately set back by this.

The CSS solution is a decent work around for hiding translations for now for those that manage to find this thread, but this seems like this should be built in since it is everywhere else, and the ability to load human translations would be very helpful.

Edit: the above CSS still presents the issue of showing the translation every time you hover over a word for the definition, so I modified it a bit.

/* blur translation under video */

.main-translation-wrap span{
        color: transparent !important;
        text-shadow: 0 0 20px #fff;
}
/* unblur translation via mouse hover */
.main-translation-wrap span:hover{
        color: rgba(255, 255, 255, 0.667) !important;
        text-shadow: unset;
}
8

For anyone who wasn’t able to get MelonFlavor’s solution to work for unblurring (maybe something changed about the page layout), simply moving the hover pseudoselector worked for me in Chrome on MacOS. Additionally, these element’s have a pointer events rule which prevents the above fix from working in fullscreen. Applying a new rule to allow all fixes that:

/* blur translation under video */
.main-translation-wrap span{
        color: transparent !important;
        text-shadow: 0 0 20px #fff;
        pointer-events: all !important;
}
/* unblur translation via mouse hover */
.main-translation-wrap:hover span{
        color: rgba(255, 255, 255, 0.667) !important;
        text-shadow: unset;
}