Menu icon Foundation
XY Center Flexbox

So I've got a layout like the following:

.fixed-overlay
.row.flex-video.vimeo
.small-12.large-12.columns
%iframe

With styling like:

#hidden-video
top: 50%
left: 50%

.fixed-overlay
display: none
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0, 0, 0, 0.33)
z-index: 999

For the life of me I cant get this video to center though and be responsive. What should I do? It's a vimeo video iframe. It just stays at the top left of the row and then what's worse is when I resize the screen there's an added margin associated with the left side that pushes the video over. I just want it to center on the screen no matter what the size.

centerflex videoResponsive

So I've got a layout like the following:

.fixed-overlay
.row.flex-video.vimeo
.small-12.large-12.columns
%iframe

With styling like:

#hidden-video
top: 50%
left: 50%

.fixed-overlay
display: none
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0, 0, 0, 0.33)
z-index: 999

For the life of me I cant get this video to center though and be responsive. What should I do? It's a vimeo video iframe. It just stays at the top left of the row and then what's worse is when I resize the screen there's an added margin associated with the left side that pushes the video over. I just want it to center on the screen no matter what the size.

Ben Nelson over 4 years ago

Flexbox == super helpful, just what I was looking for outside of using JS to change the width of the iframe for the viewport.

Bob Sawyer over 4 years ago

Excellent!