I added text in the middle dropbox area of video and it shows in edit mode but when running in browser the text does not show up. Z index is not working with the video component (tried all settings, relative, etc) Also tired putting in a container first, then text.
Any help is much appreciated–thanks!
Hi @Jharwig
It’s hard to know without seeing the page, could you share a URL, or even better the Elements project? You can share your project via Elements Cloud 
Subject: Z-Index Issue: Overlaying Glassmorphism Text/Link Over Video Component.
Hi Ben,
Thank you so much for replying!
Context:
I am part of a non-profit group of mostly retired medical professionals in Wisconsin that work races (running, biking, mountain biking and running on trails, marathons, you name it). I’m doing this site pro bono and starting with desktop/ laptop first, later will try to fix smaller screens and mobil.
This main page, “About”, is indicative of what additional pages will be like. Being we want to have videos my goal is to only have them play when in viewport. Otherwise I find if they are all playing the page can freeze up based on available ram a person may have. Also we like sound, as you’ll see in the last video.
An earlier version of this page I didn’t use the Video Competent but rather used a container or background as you’ll see for the opening video. The limitation with that is no sound and it always runs, no viewport controls. For the top video that’s ok we need neither, but for the next two videos (team & example medical care) I like the video component because I can use play on viewport and sound.
Problem:
I love the glass effect for a descriptor (link). However, as you’ll see I had to put it ahead of the video component and then offset it down by 96 to get it somewhat over the video. I could not have it on/ over the video component even trying to adjust the z index every which way. I also tried plain text instead of the glass effect and although it shows over the video in edit mode it won’t show in preview, and that also playing with z index. By using the offset 96 I got it pretty good, however it messes up mobil so I’m afraid later I’ll have to figure out how to do this, hence the forum call for help.
Asking for Help:
How do I reliably overlay custom elements (glass text/link) on a Video Component?
Any z-index stacking context fixes, pointer-events tweaks, or alternatives (e.g., custom embed)?
Bonus: Mobile-safe approach without offsets?
Your expertise would make a huge impact for our group—thank you in advance!
Jeff Harwig
(262) 994-3060
Franklin, WI 53132
I have two emails that I used with Rapidweaver over the years. I mainly use and prefer my gmail now, but either work:
jeff.harwig@gmail.com, jeff.harwig@pinepointinnovation.com
Hi @Jharwig
I’ve recorded a quick video explaining how’d do the video overlay, hopefully this is what you’re after.
Have a watch and let me know if you need any more help
Here’s the updated project from the video.
Poor Ben he never gets credit! 