最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

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

matteradmin4PV0评论

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?

Post a comment

comment list (0)

  1. No comments so far