Video modal not playing when filtering posts

[ad_1]

Hello-

On my homepage, I am displaying all the posts I have available with a bootstrap col layout. Each post will have a category assigned to it. Each post is either an article or a video. If it’s a video, I have updated the code so that when users select “Play Video”, a modal overlay will display with the video. All that works until I filter the posts.

Card template:

<li id=”post-<?php the_ID(); ?>” <?php post_class(‘col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch’); ?>>
<div class=”card rounded-3″>

<!– Image & category –>
<div class=”card-header border-bottom-0 p-0 position-relative rounded-top”>
<!–
<div class=”category-name bg-white d-inline-block position-absolute py-2 m-4 rounded-pill”>
<?php
$category = get_the_category();
if ( ! empty( $category ) ) : echo esc_html ( $category[0]->name );
endif; ?>
</div>
–>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail(‘full’, array(‘class’ => ‘card-img-top rounded-top’));
} else { ?>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/fpo/Post_Featured-Image_FPO.jpg” class=”card-img-top rounded-top” alt=”<?php the_title(); ?>” />
<?php } ?>
</div>

<!– Title & button –>
<div class=”card-body d-flex flex-column align-items-start rounded-bottom”>
<?php the_title( ‘<h2 class=”card-title fs-5 mb-3 mb-md-4 text-white”>’, ‘</h2>’ ); ?>
<?php
$article_link = get_permalink( $id );
$video_link = get_field( ‘video_embed’);
if ( has_tag ( ‘video’ ) ) { ?>
<div class=”modal fade border-0 text-white” id=”post-<?php the_ID(); ?>-modal”>
<div class=”modal-dialog modal-dialog-centered modal-xl”>
<div class=”modal-content border-0″>
<div class=”modal-header border-0 px-0″>
<div class=”container”>
<div class=”row align-items-end justify-content-between”>
<div class=”col-7 g-0″>
<h2 class=”fs-5 m-0″><?php echo the_title(); ?></h2>
</div>
<div class=”col-4 g-0 text-end”>
<button aria-label=”Close” class=”btn border-white mt-auto px-4 py-2 rounded-pill” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
<div class=”modal-body embed-container rounded”>
<?php echo $video_link ?>
</div>
</div>
</div>
</div>
<a class=”btn border-white mt-auto px-4 py-2 rounded-pill” data-bs-toggle=”modal” data-bs-target=”#post-<?php the_ID(); ?>-modal”>Play Video</a>
<?php } else {
echo ‘<a href=”‘ . $article_link .'” class=”btn border-white mt-auto px-4 py-2 rounded-pill”>’;
if ( has_tag( ‘article’ ) ) {
echo ‘Read Now’;
} else {
echo ‘View Now’;
}
echo ‘</a>’;
}
?>
</div>
</div>
</li>

Filtering articles

function filter_articles() {
$catSlug = $_POST[‘category’];

$ajaxposts = new WP_Query([
‘post_type’ => ‘post’,
‘posts_per_page’ => -1,
‘category_name’ => $catSlug,
‘orderby’ => ‘menu_order’,
‘order’ => ‘desc’,
]);
$response = ”;

if($ajaxposts->have_posts()) {
while($ajaxposts->have_posts()) : $ajaxposts->the_post();
$response .= get_template_part( ‘template-parts/card/card’, ‘article-list-item’ );
endwhile;
} else {
$response = ’empty’;
}

echo $response;
exit;
}
add_action(‘wp_ajax_filter_articles’, ‘filter_articles’);
add_action(‘wp_ajax_nopriv_filter_articles’, ‘filter_articles’);

I am not sure what I am doing wrong. After filtering and selecting “Play Video”, the classes display in the body and footer but some reason, the video itself is not displaying.

[ad_2]