Video Background Not Filling Space

[rosstm]

I have a website under development that uses a background video on the hero section of the homepage.

The background video does not cover the section as expected, for example if the content in the hero is too tall.

Or if the browser is resized the video does not shrink to be contained within the size of the div.

Is this a bug or have I set this section up wrong? Will add a link to the site and include access below. Thanks

[ruenel]

Hey @rosstm,

Thanks for writing in! I could not replicate your issue. This is what I see at the moment:

Please provide us with your screen capture so we will have an idea of what you are referring to.

Cheers.

[rosstm]

I’ve added a bit of padding so you can see that it is not filling the section.

[tristup]

Hi @rosstm,

Like my colleague, I was also not able to replicate the problem you described here. Can you please mention the device, browser name and version, and also the operating system you are using, that helps us to replicate the issue at our end?

Thanks

[rosstm]

Sorry, looks like those changes were reversed. Can you look now, doesn’t seem to be browser dependent.

[ruenel]

Hey @rosstm,

You will have to set the DIV elements minimum width and height:

You may set the padding too.

You must also have a responsive setting for smaller screens.

Best Regards.

[rosstm]

I don’t understand how that solves the background video issue?

The video should cover the entire section independent of the size of the div inside of the section correct?

[ruenel]

Hey @rosstm,

The issue is caused by the DIV element and its Effects. I made a copy of the homepage without using a DIV element. You can check it out in the secure note below:

Thanks.

[rosstm]

That page has the exact same problem? The video doesn’t cover the entirety of the section.

[rosstm]

I’ve found the issue. Thanks for providing 0 help at all.

You should probably look into the background video functionality on the Starter stack, it’s broken. Or just keep replying with nonsense “support”, that seems to be the preferred method.

[ruenel]

Hey @rosstm,

You are very much welcome. I have tested the template on my local testing server with Integrity stack before uploading it to your site. One thing to note when using the Starter and Blank stacks. Some of the default stylings will be missing because, these stacks, are meant for developers that intend to create their styling for some elements.

Best Regards.

[rosstm]

Confused by a few things here.

So you tested on the Integrity stack first then uploaded to my site that was using the Starter stack and did or didn’t notice the difference?

And just to confirm, by design in the Starter stack, the video background does not cover the section or div and if you want it to you have to custom code that functionality?

[ruenel]

Hey @rosstm,

Yes, I used Integrity Stack on my local testing. I did not notice that you are using the Starter pack. And by design, the Starter pack and Blank stacks have fewer styles to make them lightweight. Since this stack was intended for developers and advanced users, a custom code may be needed if you want other functionality or styling.

Thanks.

[rosstm]

.x-video.bg, .x-video.bg .x-video-inner, .x-video.x-video-bg, .x-video.x-video-bg .x-video-inner {
  position: absolute;
  transition: opacity 1s ease;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.x-video .x-video-inner {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.x-video.bg.poster, .x-video.x-video-bg.poster {
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

.me-plugin, .me-cannotplay, .bg .mejs-mediaelement, .mejs-video .mejs-layer, .hide-controls.autoplay .mejs-   video .mejs-layers {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg .mejs-mediaelement {
   overflow: hidden;
}

For anyone else who wants to use the Starter stack and background videos.

[ruenel]

Hey @rosstm,

Thanks for sharing this information.

Cheers.