Hosted video displaying off-canvas in Essential Grid lightbox

[Nuera]

Hi there,

We’re currently updating a client’s project gallery on their site to incorporate self-hosted videos into an Essential Grid gallery. We’ve gotten most of the kinks worked out with our settings, but there is one lingering issue that we can’t solve in the lightbox.

Right now, if you click on the first gallery item, it successfully pulls and plays a self-hosted mp4 video - however, it is displaying off-canvas (below the fold) so the user has to scroll down to see the video. Once you scroll down it appears to have loaded fine, it just has this massive margin at the top of the lightbox for some reason.
https://kandgcontractors.com/sandbox/

The strange part is that it is displaying perfectly on the back end of the site (inside the Essential Grid builder).

Can you help us figure out why this is occurring? Thanks!

[prakash_s]

Hello Nuera,

Thanks for writing to us.

I tried to access your site dashboard but the login page is not working on my end. Please share the correct login URL. I would suggest you troubleshoot a few of the common issues before we investigate your settings.

1. Testing for Plugin Conflict
2. CSS/JS Customization
3. Version Compatibility
4. Disabling Cache
5. Child Theme

If it doesn’t work for you please share the correct login details so that we can check it at our end.

Thanks

[Nuera]

I’m sorry, Prakesh - I forgot that we block all IPs outside of the US from the backend of that website. We’ve temporarily deactivated that now.

Thank you for taking a look!

[marc_a]

Hey Nuera,

I also check the essential grid setting and I couldn’t also figure out why it displays that way on the front-end! Upon further investigation using the inspect element, there’s no styling for the self hosted video using the essential grid. That being said, you can use the CSS code below to fix your issue, please add it to the content CSS.

.esgbox-slide video {
  width: auto;
  height: 720px;
  max-width: 100%;
  max-height: 100%;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[Nuera]

That’s perfect - thank you so much!
G

[marc_a]

Hey Nuera,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.