Altering Full Screen Mode

Hi there,

The site I am working on experiences a problem when viewing the Media Grid videos in full screen mode as a slider video that is used at the top of the page is meant to “pause/start” when the slider itself is technically inside the viewport. And when the videos from Media Grid are taken “full screen”, the video player removes the scrollbars from the page, essentially taking the web page to the very top again (without the user knowing), and then just places the video on top of everything so you never really see where the page’s current scroll position is.

I tried some custom CSS as a workaround but it didn’t seem to work:

html.mejs-fullscreen {overflow: scroll !important}
html.mejs-fullscreen .mejs-container-fullscreen,
html.mejs-fullscreen div#mg_full_overlay_wrap,
html.mejs-fullscreen #mg_full_overlay,
html.mejs-fullscreen #mg_full_overlay_wrap {position: absolute !important}
Basically what we need here is for the video player to not use any of the following CSS properties on any of its elements in any state (normal or fullscreen)

position: fixed;
overflow: hidden;
and then the page won’t secretly jump to the top when the video goes into fullscreen.

I have contacted the makers of the slider plug in and they have said that there isn’t any changes that can be made that will fix this – the changes need to be made to Media Grid.
If you could please suggest some solutions, I would really appreciate it. Otherwise we may need to consider swapping out Media Grid for another plug in which would be a shame because it is an excellent product.

Thank you.

https://www.ads-software.com/plugins/media-grid/