Use of "Browser height as row height" bug? Video clipped instead of contained

[thomasmaier]

Hi,
I want to just show one HTML5 video in the first row of a page. It is necessary that the video is being shown form edge to edge on page load. Therefore I want to make use of the "Browser height as row height" feature. I specifically don't want to use Fullscreen Slider or Cover Feature for that.

Though the problem is that the video is being cut off instead of resized smaller to fit into the row. The video should be centered in the row to all sides and either have 100% width or 100% height of the row.

I tried to force the video to do that with custom css, but it doesn't work. I gave the video an ID (#intro_clip):

#intro_clip video {
    max-height: 100vh !important;
}

But that doesn't do what I want.

Let me know if you want to have a look yourself, I can send you the website and login.

[Richard]

Dear @thomasmaier

Nice to hear from you,
At this point could you post a link to your website with the video & we will take a look

Thank you for using Lay Theme!

Best wishes
Richard

[thomasmaier]

Hello Richard,

Thanks, I will send the details via email.
Highly appreciated if you could have a look.

Best

Thomas

[arminunruh]

hey @thomasmaier

I just got ur mail with the login details, thx.

So I inserted the video as a background-video instead of as a normal element.
The row is a browser height row now.

Then I gave the row a class of "contain-bg-video"
and put the following css in lay options -> custom html & css:

.contain-bg-video .background-video video{
    object-fit: contain!important;
}

[thomasmaier]

Awesome! Nice trick!

[thomasmaier]

For documentation:

I have added another bit of code, to change the 100%-viewport row height to something smaller, so a small piece of the second row is visible, plus I subtracted the Top Frame margin so the video is not hidden by the fixed-positioned header:

.row._100vh, .row._100vh.empty {
    height: calc(90vh - 100px)!important;
    min-height: calc(90vh - 100px)!important;
    max-height: calc(90vh - 100px)!important;
}

[Richard]

Dear @thomasmaier

Awesome & great to hear :)

Thank you for using Lay Theme!

Best wishes
Rich