Text as trigger on Vimeo enbedded Videofile

[esthermathis]

Dear Armin,
I'm redesigning my website, and each project has an Image or an embedded Videofile Fullscreen. On the image, there's a Text "MORE INFO" that serves as a trigger, when clicked on, there's an additional text ans info about the shown work. the additional text appears as a half-transparent layer on top if the Image.
I made it this far. But I can't figure out, how to do this on top of an embedded vimeo-video. Is it possible?
Thanks for your amazing laytheme!

[arminunruh]

Hey, thanks a lot for your kind words!

Also, are you using the text on image feature?
And your question is how to have a text on video?

For the additional text that appears as a half-transparent layer on an image, are you using the page overlay feature or what are you using?

You can also just post the link here so I can look at how you did everything.

[esthermathis]

https://www.esthermathis.com/liminalbone/

https://www.esthermathis.com/wp-admin/post.php?post=550&action=edit
(this is the edit site)

thanks for your reply! I used the text on image feature where there are images like here in the link above.. but where I have an embedded video, it doesn't work like that. like here:
https://www.esthermathis.com/blinds-copy/

Is there a way to solve this?

And an addition I have another question: how can I make the white bar on top of the mobile-layout disappear?

thanks a lot for you insight!

xx esther

[arminunruh]

a white bar on top of the mobile layout. You go to customize mobile, and then I think maybe mobile menu, or I think it's mobile menu bar. There, click Hide, but make sure you use the latest version of Lay Theme.

Because I think maybe the mobile menu bar height option is not available in older versions.

[arminunruh]

oh, I see, so you coded something where it shows the text element.

.info-layer.show-layer {
opacity: 1 !important;
visibility: visible !important;
}

And basically, you bind a click on one image and then show this via JavaScript.

Well, the problem with Vimeo embeds and YouTube embeds is that those are iframes. Basically, it's like a new website embedded into your website, so here you actually can't bind a click event on this.

You would need to not use a Vimeo video, but instead use a video by adding it using +video -> +.mp4 video.

Only this one you can bind a click onto.

Of course, those video files can get pretty huge, and videos should still load fast, so maybe check this out:

https://laytheme.com/documentation/gridder-elements.html#video-cdn-and-hls

[arminunruh]

but if I was you, I would look for an alternative way of doing all of this.

When you click on a row in the Gridder, in the sidebar you can enable fixed row.

You could, for example, create an info button. Put this in a row. Make this a fixed row so it overlays the project, and then, when someone clicks the info button, it shows the text. Maybe something like that is easier. This way you can keep using the Vimeo embeds.