How to hide/show a title over a VideoBox? (EditorX)

Hello,

I have been building my showcase site in EditorX and so far, all good. Now, I’m stuck at a seemingly simple task. I have a scroll of fullscreen videos, set up with a title and strapline over them, like this:


I would like the text to behave just like the Play Button does. Visible at first, then on a click anywhere on the VideoBox, H1&2 hide. On click they show again. Simple hidden on play, visible on pause behavior.

Now, nothing I do is making that text go away. VideoPlayBttn is the correct ID for the Play Button. I tested my function by making the text hide by clicking it, it works. The problem seems to be that it’s not reacting to anything from the actual VideoBox component. I tried calling the mediaplayer, the videobox itself, nothing. I must be missing something in the way this VideoBox is built.

export function VideoPlayBttn_click(event) {
    $w("#text9").hide("fade");
}

Thanks for reading. I’m a bit of a code noob, but if you speak slowly I’ll read and learn.

I found a clue. I’m trying to test the function on the H1 itself.

When I write the function in the code editor alone, it doesn’t work. When I go into the properties panel to add an onClick event (which gives the exact same result in the code editor), the function works as intended.

On the VideoBox element, I am unable to add any events in the properties panel. This is all there is to it:

This could be the issue.