Text Overlay video not possible?

Hi Guys

I’m currently working on building a Netflix like streaming platform on bubble and I can’t seem to figure out a way to overlay text on a video using the new flexbox engine.

I made it so that clicking on an image in a repeating group launches a popup page that gives you more detail about the particular video. I am using @pork1977gm VideoJS plugin to show the video.

however, I can’t figure out a way to overlay text or any other element on the video. It just always placed below the video or to the side depending on whether I choose column or row in the layout options.

Can someone help or is this just not possible in bubble?

Hi @hameed,

A few possibilities:

  • Use a Fixed layout for container of video and text
  • Use Align to parent (ATP) layout for container of video and text
  • Use negative margins for text element

More info on layout types can be found in the docs.

EDIT

Generally speaking, I’d avoid Fixed layout unless you’re sure it’s the right choice. The other 3 layout types are much more versatile and better suited to responsive design.

Hi @sudsy thanks for the quick reply, yeah I also try to avoid fixed layouts when designing my pages so that the entire website can be responsive.

I just tried it with ‘Align to parent’ and it worked!!!
Gosh, I feel like such a fool. I spent hours trying to discover how to do this and I’m not sure how that didn’t occur to me. I’ve not only been able to over lay, but also a little graded tint and all sorts. You’re awesome Steve :slight_smile: :smiley:

1 Like

Yeah, ATP is one of my favorite layout types. And I also use negative margins a fair amount for alignment. It enables you to create layouts where an element is inside a container hierarchically (when viewed in the elements tree) but appears outside the container visually (when rendered on the 2D page). The element moves with the container even though it appears “outside”.