Issue with Popup Maker Video Plugin

[micahkritzman]

Hello,

We use Popup Maker on a lot of X Theme powered websites and it’s worked perfectly until now.

We purchased the Popup Maker Video Plugin to give us the ability to auto-play the video when the lightbox opens.

Without the video plugin enabled the lightbox works fine and the video loads fine. You just have to click it to play.

https://penny.lainternet.biz/

It’s the “Watch Video” button.

The Video Plugin causes an issue with X Theme. Popup Maker Developer tracked the source of the issue down to a couple of missing closing tags.

He hacked his plugin to add in the two missing which fixed the missing admin bar and now the lightbox properly shows up but the video is not showing due to x theme css with !important that cannot be overridden.

Below is the email he sent me and I am handing it off to you to hopefully be able to fix the missing tags.

Thanks,

Micah

Daniel replied

Hey Micah,

1. The admin bar appears to be in the html, but it is being rendered inside the video popup’s html. As is the other popup and all footer scripts. This usually happens when there are not enough closing tags in the popups content. In this case it appears to be coming from the theme. More on that below.

This is the outputted HTML inside the popup

<div id="popmake-4217" class="pum-container popmake theme-3684 pum-responsive pum-responsive-medium responsive size-medium">
<div class="pum-content popmake-content"><br />      <style>#pum-video-1::before { padding-bottom: 56.25%; }</style><br />      <div id="pum-video-1" class="pum-video-wrapper"><br />         <div class="pum-video-container"><br />            <div class="x-video player" data-x-element="x_mejs"><br />               <div class="x-video-inner"><br />                  <video class="x-mejs x-wp-video-shortcode advanced-controls" width="100%" height="100%" preload="none" controls="controls"><br />                     <source type="video/mp4" src="https://penny.lainternet.biz/wp-content/uploads/Penny-Pitch_Trim.mp4?_=1" /><br />                  </video><br />               </div><br />            </div><br />         </div><br />         <button type="button" class="pum-close popmake-close" aria-label="Close">×</button><br />      </div><br />

I can tell based on the current indentation of the that should be only indented once, that the missing (x2) are coming from inside the div with class pum-video-wrapper, the only thing inside it is another plugin/theme’s custom wrapper for the same video player.

2. I used the Health Check plugin’s Troubleshooting mode to narrow it only to the theme, but after spending 45 minutes digging through all of the files in that theme I cannot for the life of me figure out where they are modifying the video player to check their code and see if anything stands out. It may be worth sending them a copy of our extension and asking if they can shed some light.

3. Since I know our code well enough I went ahead and edited the Video extension itself and hacked in 2 additional which seems to resolve the issue. Not a great solution, but gets you by for now.

4. That said, the video now autoplays correctly, but the issue unfortunately doesn’t end there. Their custom CSS for the video player is very specifically written for their needs, it is overwriting our styles with !important on everything from height & width, to positioning. Not sure we can do much about that honestly.

Hopefully they can provide some assistance to disable that or at least make their player not work for our popup contents somehow. Otherwise I can process a refund as I’m not sure we can fix it from our code unfortunately.

Let me know.

–
Thanks,

Daniel Iser
support@wppopupmaker.com

---

Typical support hours: Monday - Friday 11:00 - 19:00 UTC/GMT -5:00 (Central USA)

[alexander]

Hi Michah,

I hope you’re doing well today. I’m sorry that you’re experiencing this conflict. Thank you for providing all the information you’ve gathered so far, and for providing login credentials.

While trying to isolate the problem, I created a test page (see secure note). I simply output the video directly so we can test without the popup. A similar problem occurs where the video doesn’t load, and a white box is displayed instead. If I temporarily deactivate the plugin “Popup Maker - Videos” the test page works fine. I checked the home page and now the video is shown inside the popup. I’ve left the plugin deactivated for now.

Our theme tells WordPress not to load the native player styling since we provide our own styles for this. We do use the base level mediaelement scripts included with WordPress, but we prevent WordPress from loading additional stylesheets (enqueued under this hook: wp-mediaelement). What I think is happening is that the plugin is causing those styles to load after all, which in turn break the video player since the styles are conflicting.

Try adding this code to functions.php of a child theme:

add_action('wp_enqueue_scripts', function() {
  wp_deregister_style('wp-mediaelement');
} );

That should prevent the additional styles from loading.

[micahkritzman]

That code along with the code below which I got form the Popup Maker developers solved the issue for me.

Thanks for the help.

Micah

add_action( 'wp_enqueue_scripts', 'fix_pum_video_assets', 12 );
function fix_pum_video_assets() {
	foreach( wp_styles()->registered['popup-maker-site']->deps as $key => $handle ) {
		if ( in_array( $handle, array( 'mediaelement', 'wp-mediaelement' ) ) ) {
			unset( wp_styles()->registered['popup-maker-site']->deps[ $key ] );
		}
	}
}

[christian]

You’re welcome, Micah. And, thanks for sharing the fix from the Popup Maker developers.