Greasy Fork

Hello, I have recently start using a website called FleuntU (fluentu.com). This website provides videos that gives an easy learning experience for language learners. See the attached screenshot for an English->Japanese example. In the subtitle area, it provides words which you can hover over to get more information, add to a flash card deck, etc...

When you move your cursor over the subtitles area while the video is playing, the video automatically stops. Similarly, when you move your cursor away from the subtitles area, the video continues.

While most users consider this a benefit of FluentU, I consider it a deal-breaking feature. The reason why it's such a horrible feature for me, is because I use Yomichan (like Rikaikun), which is a plugin for Chrome to help Japanese learners.

See the second screenshot with the Yomichan popup. I want to click the green circle with the plus in it (to add the word to my Anki deck) - this is marked with a green arrow too. However, as soon as I bring my cursor above the red line, regardless of whether I stopped the video before bringing the cursor into the subtitles box, the video will automatically continue to play.

I am requesting a script (or other technique/advice) that will stop the subtitles area from starting or stopping the video. Only I should be able to start/stop the video manually.

Thanks,
Greasy Hair

I just found that if I change the name of this element's class, `< div data-tkn-caption-id="28549" data-tkn-id="0" id="captm-0" class="caption current glyph ja hover">... < / div>`, then the interface behaves how I want it. So I guess a work around for the time being can be to create a script that will simply change the class name of this particular < div > element. Does anyone know how to do this? I zero javascript or HTML experience :(

Actually, if you change the class name of the div tag, it also changes the colour of the subtitles to black which I don't like. I would like them to stay white, so the workaround script will perhaps need to duplicate the current CSS class for the new edited class name.

A further twist - only the word "current" can be changed in the div tag's class that I mentioned before to change things how I need. So I need a script that will change the div tag's class from "caption current glyph ja hover" to e.g., "caption newclassname glyph ja hover". And then it needs to change the CSS class definition (see red box in screen shot) from ".captions-view .caption.current, .mr-caption-container" to ".captions-view .caption.current, .mr-caption-container, .captions-view .caption.newclassname".

Following these steps in the HTML inspector gives me the exact behaviour I want. I just need these steps to be converted into a greasy fork script.

You are looking for a z-index css property in order to place the popup with translations on top of youtube video element, thus hover handlers shouldn't be triggered until the popup disappears.
Use Stylus extension.