Possible to create smaller overlay box on top of video?

I have a background video on my homepage with some text over it. I want a centered overlay box behind the text but I don’t want it as part of the background of the text box. Is it possible to modify the overlay to be a specific size and just float in the middle instead of full screen?

I’ve currently created a workaround (visually) but I don’t like how it looks on mobile devices because I had to do it in pieces. You can see the website link below and see what I’m talking about. Also, if you see a better way to execute what I’ve done, please let me know. I had to fuss with the alignment of the buttons to get them closer to each other so that doesn’t look great on mobile either. If I center align the buttons within their grid space, they are then visually too far apart.