Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Nov 23, 2020

How to hide/show a title over a VideoBox?

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. 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 answers0 replies
1
Dec 10, 2020

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");
     })
});

1
Dec 11, 2020

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.


Editor X

Design your boldest creations.