Video Popups

Popup Maker officially supports 3 ways to create video popups in WordPress:

  1. Adding a media file via the classic editor (shortcode method).
  2. Adding a YouTube video using the Gutenberg YouTube block.
  3. Embedding an video via a URL using the Gutenberg Embed block.

Learn more in our Video Popups Introduction guide.

All the video popups here were tested on an iPhone using Chrome with no issues.


1. MP4 loop autoplay playsInline popup using the classic editor

Here’s the WordPress shortcode for that video popup.

[video width=”480″ height=”320″ mp4=”https://streetphotography.blog/wp-content/uploads/2021/05/tara_maldives_gif.mp4″ loop=”true” autoplay=”true” preload=”none” playsinline=”true”][/video]

2. YouTube block popup

We recommend turning off the Resize for smaller devices setting to avoid large unwanted padding on larger devices. See the screen capture.

3. MP4 video popup using an embed block


There’s a fourth way, but it’s experimental.

4. MP4 loop autoplay playsInline popup using Gutenberg

Gutenberg support is still experimental. You might need to click twice on this button to launch the popup.

You’ll also need to force the popup to open. The sample jQuery below tries to launch the popup when you click the button above.

<?php
function my_custom_popup_scripts() { ?>
  <script type="text/javascript">
    jQuery(document).ready(function ($) {
      // Add a click trigger.
      $('.popmake-1545').click(function(e) {
        console.log('[PUM] Manually launching popup 1545.')
        // Launch the popup.
        PUM.open(1545);
      });
    }); // jQuery
  </script>
<?php }
// Load in the footer and load it late.
add_action( 'wp_footer', 'my_custom_popup_scripts', 900 );

Published
Categorized as Popup Tagged

By mark

photographer ∙ writer ∙ web developer ∙ bali indonesia