[RESOLVED] Header Background Video - Full Cover

[markw1]

Hi again,

I have a pro header where I have a background video playing (from YouTube)

How can I get the video to FORCE cover, i.e. not display with any black bars top/bottom side/side.

I was trying to add following CSS to the iframe, but have been un-successful.

  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);

[EDITED] - RESOLVED
Hi @rad - I finally managed to do this.
adding following css

/* Video force cover */
/* taken from https://stackoverflow.com/questions/24579785/force-iframe-youtube-video-to-center-fit-and-full-cover-the-screen-in-the-backgr*/
@media (min-aspect-ratio: 16/9) {
  .x-video-inner { height: 300% !important; top: -100% !important; }
}
@media (max-aspect-ratio: 16/9) {
  .x-video-inner { width: 300% !important; left: -100% !important; }
}

[rad]

Hi @markw1,

Thanks for writing in.

It’s not gonna work, plus, the black bars are from youtube player itself and it’s normal. Instead, you should use a selt-hosted video (actual video file URL).

The idea is the aspect ratio, if the video is 16:9 (landscape rectangle) then it will fit on a container with same aspect ratio. If it’s displayed on a 4:3 (almost square) then it will display black bars on top and bottom to make sure the video becomes 4:3 without distorting the video. Imagine a rectangle video forced into a square player, that’s going to stretch.

Now in your case, you have to make it full-screen and imagine the full-screen in smaller device fitting a rectangle video.

It adds more black areas, and now, what if it’s forced and stretched.

But, I recommend having two videos (vertical and landscape), like for desktop and for mobile and just hide the header bar using Hide During Breakpoint options to make sure the video only shows once per device.

Thanks!