Essential Grid Lightbox not sizing correctly on desktop

Support
#1

Essential Grid Lightbox not sizing correctly on desktop

Hi x-ers,

I’m facing a problem with Essential Grid’s Lightbox (see wp.wizzart.nl). The site is not yet live, so you’ll see a custom under constuction page with a custom grid with 2 grid items on the bottom of the page.

On both elements I’ve set the Video Ratio to 16:9

Lightbox settings:

Default Width: 1920
Default Height: 1080

API/JavaScript:

jQuery.extend(jQuery.esgbox.defaults, {
aspectRatio:true
});

Still there’s a small black part left and right of the video in the lightbox! On my ipad air2 it shows correct.

Has anybody has a clue as to why this happens?

Richard

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

For Design & Development, Marketing & Media, and Hosting & Optimization discussions you are welcome to use the General Forum to discuss with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

Hi there,

That is actually related to the Video which you try to show. It does not have the proper size with the settings you have.

The iPad has different width/height window size that is why it might show correctly.

I suggest that you check this with other videos. And if it works ok, try to change the aspect ration to make it compatible with your video.

Thank you.

#4

Christopher,

I don’t understand your reply, both videos are actually full hd (1920x1080). So are the lighbox settings and aspect ratio is 16:9. The jquery part is supposed to keep the aspect ratio intact, right?

Richard

#5

Hi Richard,

See this: https://screencast-o-matic.com/watch/cb66eIICdP

Aspect ratio of the video and the lightbox doesn’t match. Check your Essential Grid lightbox Tab > Sizing settings.

#6

Hi there,
I’m also trying to customize the size of my Essential Grid element (making it smaller) in this page, but I can’t figure out how to do that. I look at this link https://www.themepunch.com/essgrid-doc/lightbox-options/ and followed the instrucions, but nothing happened.
Can you please help me?

Thanks!

#7

Hi @skated,

The size of the grid item will depend on the number of columns per ROW and the size of your container. Go to Grid Settings Tab
We can also add maximum width on your ROW style field. Like max-width:500px;

Hope this helps.

1 Like
#8

Lely,

I’ve been investigating this issue, but it seems to me that numbers you’re altering in the inspector are actually generated by Ess. Grid based on the settings I’ve entered in the backend. Seems like they’re the wrong sizes .

Aspect ratio of the video = 1920:1080 = 16:9
Aspect ratio lightbox = 1920:1080 = 16:9

I tried embedding a couple of other vimeo video (full HD / 1920:1080 /16:9), same issue!

I really don’t get it …

Richard

#9

Hi there,

I checked and videos have the correct aspect ratio (lightbox and grid). Are you referring to the first video? The video itself has white spaces.

Would you mind providing some screenshots of what you’re getting?

Thanks!

#10

Rad,

yeah that’s correct. That is actually in the render (part of the test video itself) to check if there’s any cropping involved. I’ve been a video editor and colorist for some 20 odd years, so that’s why I’m convinced there’s is something strange going on.

When you checked the page the settings were different from my previous post, because I was experimenting to see what was going on. I changed it back to the original settings.

Default Width: 1920 | Default Height: 1080

and in the API / JS settings:

jQuery.extend(jQuery.esgbox.defaults, {

aspectRatio : true

});

Check the second and the third video, it’s weird why there’s a white margin left and right (was black before) and also the round corners are new (weren’t there when I first reported the problem).

The site wp.wizzart.nl was the dev site,so I’ll send you the login in a pm, so you can check for yourself. The live site also has the same problem (wizzart.nl).

Thanks in advance,

Richard

#12

Hi there,

I went to your dev site and checked the settings and tried and checked both dev and live site the video is playing ok on my desktop using Mac Chrome browser. There are no black or white bars at the left or right section of the video.

Kindly tell us which browser and the browser version with which resolution you check that you see the problem? Give us a screenshot and information like that, please. So that we can recreate the issue to be able to help.

#13

Hi folks,

  1. I am testing on my laptop (win 10 / 1366 x 768 px) in Chrome, Firefox and Edge. See atached screengrabs.

  2. If I test on my Ipad Air2 everything seems ok, both in landscape as in portrait.

  3. If I resize my browser on my laptop, there are some viewport sizes that show the lightbox correct.

  4. It seems that if the chosen lightbox size in Ess. Grid (still with an aspect ratio of 16:9) is smaller than the screensize of the device I watch on, there is no problem.



Richard

#14

Hey Richard,

That is correct. This happens in screens sizes that the height is shorter than the aspect ratio of the frame. To demonstrate what I mean, please see this screen recording.

Regretfully, since the calculations are dynamic we have no way of overriding it. Have you tried HD only video and not full HD? What we can do for this issue is submit a bug report so our development team could forward this to Essential Grid developers when they go through the list of reports.

Thanks.

#15

Christian,

yes please do that, because this is not really responsive behaviour for a premium plugin like Ess. Grid.

My client wants to go 4k for some of the content next year, so non full HD is not really an option.

Hope the Ess. Grid developers will reply!

Richard

#16

Hi there,

The only thing we can see is that your video player don’t match the aspect ratio of the box. Plus, setting the size of your lightbox doesn’t mean it follows any aspect ratio, it’s a lightbox and not a player or image that maintains aspect ratio as resized.

The lightbox is there to display videos, images, or content so it doesn’t maintain aspect ratio since it’s not made for videos alone. It’s not about being a premium plugin or not but how it’s initially implemented. Setting it to 1920x1080 doesn’t mean that it will maintain that size.

In cornerstone, we use percentage padding for video elements (not width nor height) and that’s to maintain the aspect ratio, and since it’s purpose is for video only then it’s okay to do that. Fixed values could respond but don’t maintain aspect ratios.

The only solution now is implementing percentage padding too, but that will affect the entire lightbox of your site especially lightboxes that aren’t meant for videos. But if you insist, please add this CSS to your global custom CSS.

.esgbox-type-iframe .esgbox-inner {
    width: 100% !important;
    height: 0px !important;
    padding-bottom: 56.2%;
}
.esgbox-type-iframe .esgbox-inner > iframe{
    position: absolute;
    top: 0;
    width: 100%;
}

Thanks!

#17

Rad,

I can’t see the logic in your answer, you say “The lightbox is there to display videos, images, or content so it doesn’t maintain aspect ratio since it’s not made for videos alone. It’s not about being a premium plugin or not but how it’s initially implemented. Setting it to 1920x1080 doesn’t mean that it will maintain that size.” But if I choose for example 960 x 540 px for the lightbox size, it does maintain aspect ratio and is fully responsive. It goes wrong when the chosen lighbox size is greater than the resolution of the device you watch on.

The css code you provided works, but the video scrolls with the page, so that’s not an option as well.

Anyway, I decided to write custom lightbox code that’s fixed on the page and is responsive. So consider the problem fixed :wink:

Richard

#18

Hi,

Glad to know you found an alternative.

Have a nice day! :slight_smile: