We have 3rd party plugin: View (by wp-types.com). When activated, there are additional WordPress Core files that are loaded. With these files loaded, a self-hosted video set as the background of a section becomes hidden.

When the Views plugin is active, these files are being loaded:
/wp-includes/js/mediaelement/wp-mediaelement.css?ver=4.2.3
/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=2.16.2

If we edit the css around the video to removed the rule about overflow, the video is visible, but not vertically centered.
/wp-content/themes/x/framework/css/site/stacks/renew.css?ver=4.0.5

.bg .mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*    overflow: hidden; */
}

Is there a different css rule that can be added so that .mejs-mediaelement can have overflow of inherit and the video can still be vertically centered?

Dev: http://attackpoverty.redpupmedia.com/
Other Support Thread (with screenshots): https://wp-types.com/forums/topic/compatibilty-issue-with-x-theme-background-video/

Thanks

Thanks for writing in! It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

While the 3rd party plugin activates the scripts, the scripts causing the issue are part of the WordPress Core.

As this is a conflict with WP Core files, I think there might be a fix needed.

Thanks

Wordpress actually loads the core files first, then X theme override it by loading equivalent css with different styling. The problem is that your plugin loads wordpress core files again and override X theme loaded styles.

1. WordPress core – Base
2. Theme css – override core
3. Plugin css – override theme css

It’s like your plugin is putting back the styling that’s already been overridden by the theme. You should contact the plugin developer and request a feature that will allow you to toggle the loading of said core files.

Thanks!

The resolution was simple and might be a fix y’all want to add. There was no height defined for the area. I believe Cornerstone could dynamically add the height based on the configuration of the page layout (elements, including gaps).

We defined the height manually in our CSS, based on the size of the section as designed.

.mejs-inner{
      height: 504px;
}

Thanks!