Streaming live at 10am (PST)

How to center 100% videobackground?


#1

Hello,

i just created a section with video-background (min-height: 100% / min-width: 100%). It works perfect, the only problem is that the video aligns top/left. Is it possible to have the video centered?

a bit like the third slide with video here
http://ideas.com.ua/


Here is my public share link: https://preview.webflow.com/preview/multipliersmethod?preview=6a1c9cb11ad091e1a6262214bac7c747


#2

Okey, I did it. By custom css code

.bg-video {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
.bg-video > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
  .bg-video > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .bg-video > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  .bg-video > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.