How to hide/show a title over a VideoBox?

Ask the community
1

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:

466×530 16.2 KB

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. The properties panel for the VideoBox doesn’t let me add any events either. I must be missing something in the way this VideoBox works.

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 listen and learn.

2

I can think of two possible causes in this case

  1. Your text9 component is somehow overlapping the play button, and therefore it can’t get clicked. You could try moving it/making it smaller.
  2. Sometimes the cause of this can be that the event handler is not linked to the function in the right way. In this case, try putting the code below in the onready part of your page code. (I’ve included the onready bit in this example for clarity, you can add other code to it as well)
$w.onReady(function () {
     $w("#VideoPlayBttn").onClick(function(event){
         $w("#text9").hide("fade");
     })
});
3

Oh my $%?&* I found it. Thanks to your line, I went down a different path. I tried inputting the code above and it didn’t work, but it gave me a new error I hadn’t had before, saying onClick did not exist as an event. That got me curious and after a few tries I found I could call the media player itself with “play” like so:

export function mediaPlayer3_play(event) {
    $w("#box7").hide("fade");
}

Then instead of hiding the text I hide the whole stack and it works.
Heck yes.