php - JQuery modal not loading video on popup, only displaying it after multiple reopenings

admin管理员组

文章数量:1024670

I am trying to load a PHP function into a modal, containing a video. I'm currently using jquerymodal's plugin to achieve that. Here's the current .js code I'm using: And the current CSS:

Using PHP (basically something like <?php echo wp_show_posts_function(); ?>) to call any other text based content works just fine, only video functionality does not display right away (both oEmbed and third party video players). It displays only after closing and opening the modal multiple times, as shown in this short screen capture:

My function looks like this, echoing a videoplayer inside an iframe:

  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=".html?autoplay=false&loop=true&autopause=false&muted=false&url=https%3A%2F%2Fvimeo%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);
  }

And my content calling on that function looks like this:

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

Somewhere between display:none and display:block the jQuery modal gets stuck in displaying the video. Again, all other php functions without video (just plain text or Links) work immediately, only videos display after multiple tries of opening and closing the modal window, as shown in the linked above video.

How can I get the modal to open the video right away?

I am trying to load a PHP function into a modal, containing a video. I'm currently using jquerymodal's plugin to achieve that. Here's the current .js code I'm using: And the current CSS:

Using PHP (basically something like <?php echo wp_show_posts_function(); ?>) to call any other text based content works just fine, only video functionality does not display right away (both oEmbed and third party video players). It displays only after closing and opening the modal multiple times, as shown in this short screen capture:

My function looks like this, echoing a videoplayer inside an iframe:

  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=".html?autoplay=false&loop=true&autopause=false&muted=false&url=https%3A%2F%2Fvimeo%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);
  }

And my content calling on that function looks like this:

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

Somewhere between display:none and display:block the jQuery modal gets stuck in displaying the video. Again, all other php functions without video (just plain text or Links) work immediately, only videos display after multiple tries of opening and closing the modal window, as shown in the linked above video.

How can I get the modal to open the video right away?

本文标签： phpJQuery modal not loading video on popuponly displaying it after multiple reopenings