Why is my photo overlapped by my video’s player when hovered?

Basically when hovered, my image is *2 scaled and it overlaps my video as I expect it to, the problem is that it only overlaps my video, not the player with the timer and the play button of my video. I’ve tried to add a z-index: 2 in .voyage-image:hover but it seems like it has no effect. So, what i’d like is when hovered, the image overlaps the video AND the player… Thanks for your help 🙂

Video text overlay with “responsive” center alignment

I am trying to display a full width video with an overlay text that sits centered on the video vertically and horizontally. The centered positioning should respond to changes in the viewport width such that it is always centered. Also I would like a “caption” (h2 tag in the example) to always display right below the video regardless to how the viewport is sized.