php echo containing a video not displaying correctly on modal opening

TLDR: I cannot get videoplayers to work inside the modal when using PHP functions or an Echo.

I searched days for a solution, but baseline is, I am nowhere near competent enough to find a fix on my own.

I am using the plugin on a Wordpress site and everything so far is working great. The modal opens when it should and it displays all content effortlessly. But when it comes to PHP and videos or video players (oEmbed or onelineplayer.com for example), it just won't work.

My modal content looks like this at the moment:

<div id="videomodal" class="modal">
<?php echo wp_show_posts_videolink(); ?>
<p>Thanks for clicking.</p>
<a href="#" rel="modal:close">Close</a>
</div>

The echo contains a function that is supposed to display a video iframe. Standalone just as html the video iframe and link (inside the modal) work immediately. And outside the Jquery Modal window, the video will show as well. But as soon as I try to put the echo or any php content inside the modal - containing video content - it will not display, or only after multiple attempts opening and closing the modal window.

Content of the function:

function wp_show_posts_videolink() {
    global $post;
    $videol = get_field('videolink');

    if ( '' != $videol ) {
      $allowed_tags = '<script>,<iframe>,<style>,<br>,<em>,<i>,<ul>,<ol>,<li>,<a>,<p>,<img>,<video>,<audio>, <div>'; /*** MODIFY THIS. Add the allowed HTML tags separated by a comma.***/
      $text = strip_tags($text, $allowed_tags);
      echo '<div style="padding-top: 50.07%; position: relative; overflow: hidden;"><iframe allowfullscreen="" scrolling="no" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;" src="https://onelineplayer.com/player.html?autoplay=false&loop=true&autopause=false&muted=false&url=https%3A%2F%2Fvimeo.com%2F226137389&poster=&time=true&progressBar=true&playButton=true&overlay=true&muteButton=true&fullscreenButton=true&style=light&logo=true&quality=720p" frameborder="0"></iframe></div>';

    }

    return apply_filters('the_excerpt', $text, $standort);
  }

Basically, the issue seems to be present only when calling a video file or video player through this echo <?php echo wp_show_posts_videolink(); ?> or PHP and only when its inside the modal. I can echo everything else just fine inside and out (links, text, images), but a video player doesn't work.

Only after opening and closing the modal multiple times, it will show eventually, as is shown in this short screen capture: https://vimeo.com/328915204

No settings of the plugin were altered in any way and worked out of the box for everything I've thrown at it so far.

Maybe someone here got stuck on the same issues and has some pointers. I suspect somewhere between display: none and display: block, the PHP gets called but is already vanished when the actual modal pops up. I also read somewhere that animations can interfere with modal video playback, but as far as I know Jquerymodal does not have animations as a default.

I think Stack Overflow would be a better place for this question, as it's more implementation-related than specific to this modal plugin.

That said, my guess is that it takes a few moments for the video iframe to actually load after the modal is first opened. If you open the modal, and the video doesn't appear at first, does it eventually appear if you leave the modal open and just wait a few moments?

Hi kyle,

Thanks for the quick reply! I already tried Stack Overflow but didn't get far at this time. But I am probably going to try again soon.

Sadly, it does not open when waiting a few moments. It does however display immediately outside of the jquery modal. I now refrained from using an external PHP function and just tried to parse the URL via an echo inside the iframe div. Still using an echo, but at least I know there's no problem with my function.

This is the code inside the modal:

<div style="padding-top: 50.07%; position: relative; overflow: hidden;"><iframe allowfullscreen="" scrolling="no" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;" src="https://onelineplayer.com/player.html&muted=false&url=<?php echo $videolink; ?>" frameborder="0"></iframe></div>

Its now basically just a text based URL ($videolink would be a vimeo url for example) inserted via PHP, but it still won't work. Without using a PHP echo ("url=vimeo.com/adress" for example) it works flawlessly. But I want to display changing urls inside there eventually.

Edit:

I just noticed that the modal divs when opening the modal through a button get displayed at the absolute bottom of my page with this structure:

<html>
<body>
<Page Content></>
<All Scripts></>
<Modal>
</body>
</html>

Maybe it has something to do with that, loading after all other scripts.

I also noticed that when opening and closing the same modal multiple times, there are also multiple modals created inside the page one after the other with display none attached, also at the bottom of the page like this:

<div id="videomodal" class="modal" style="display: none;"> Old different Modal Content </div>
<div id="videomodal" class="modal" style="display: none;"> Old different Modal Content </div>
<div id="videomodal" class="modal" style="display: none;"> Old different Modal Content </div>
<div class="jquery-modal blocker current">
<div id="videomodal" class="modal" style="display:> Actual Modal Content thats open right now </div>
</div>

They disappear as soon as the page is reloaded.

So yeah I may have messed up somewhere along the way, unless thats how the modal script behaves originally. Sorry for all the text!

kylefox / jquery-modal

php echo containing a video not displaying correctly on modal opening #244