**Updated (see bottom)**

I'm creating a testimonial slider with slick slider, but I need a modal inside every slide.

I have a custom post type 'Testimonials' (English for 'getuigenissen') that has multiple ACF: title, name, function, image and video. I want to show a button on every slide that opens a modal with the video attached to that specific testimonial. The only way I could think of to do this, is to create a modal-div for every testimonial, but I think that creates a lot of unnecessary code.

**PHP-code (I display the testimonials with a shortcode)**

```
function dfib_getuigenissen_shortcode( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type' => 'getuigenissen',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'rand',
    ) );
    if ( $query->have_posts() ) { ?>
        <div class="block__getuigenissen">
            <div class="getuigenissen__wrapper">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <div class="getuigenis__item" style="background-image: url('<?php the_field('getuigenis_foto') ?>');">
                        <h2><?php _e( 'Getuigenissen', 'copro' ) ?></h2>
                        <div class="getuigenis__inner">
                            <p class="getuigenis__quote"><?php the_field('getuigenis_getuigenis'); ?></p>
                            <p class="getuigenis__info"><?php the_field('getuigenis_naam');?>, <?php the_field('getuigenis_functie'); ?></p>
                            <a class="getuigenis__video" href=""><?php _e( 'Bekijk de volledige video-getuigenis', 'copro' ) ?></a>
                        </div>
                        <div class="getuigenis_modal">
                        <div class="modal__inner">
                            <?php the_field('getuigenis_video'); ?>
                        </div>
                    </div>
                    </div>

                <?php endwhile;
                wp_reset_postdata(); ?>
            </div>
        </div>

    <?php $myvariable = ob_get_clean();
    return $myvariable;
    }
}
add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );

```

What is the best way to set this up and how can I get the right modal to open?

**Update:**
This is what I have so far, the modal works, but the src returns unknown.
see demo: <https://copro-staging.dfib.be/>

**Testimonials.php**

```
function dfib_getuigenissen_shortcode( $atts ) {
ob_start();
$query = new WP_Query( array(
    'post_type' => 'getuigenissen',
    'posts_per_page' => -1,
    'order' => 'ASC',
    'orderby' => 'rand',
) );
if ( $query->have_posts() ) { ?>
    <div class="block__getuigenissen">
        <div class="getuigenissen__wrapper">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <?php $videosrc = get_field('getuigenis_video'); ?>
                <div class="getuigenis__item" style="background-image: url('<?php the_field('getuigenis_foto'); ?>');">
                    <svg class="arrow-prev" width="62px" height="124px" viewBox="0 0 62 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <path d="M0,0 C34.2416545,0 62,27.7583455 62,62 C62,96.2416545 34.2416545,124 0,124 L0,124 Z" id="Combined-Shape" fill="#93C119"></path>
                            <polyline id="Path-3" stroke="#FFFFFF" stroke-width="2.4" transform="translate(26.500000, 61.000000) scale(-1, 1) translate(-26.500000, -61.000000) " points="19 47 34 61 19 75"></polyline>
                        </g>
                    </svg>
                    <div class="getuigenis__inner">
                        <p class="getuigenis__info"><strong><?php the_field('getuigenis_naam');?></strong> - <?php the_field('getuigenis_functie'); ?></p>
                        <p class="getuigenis__quote"><?php the_field('getuigenis_getuigenis'); ?></p>
                        <a class="getuigenis__video" href="#" data-toggle="modal" data-src="<?php the_field('getuigenis_video'); ?>" data-target="#myModal">
                            <svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <circle id="Oval" stroke="#58595B" stroke-width="1.27776" fill="#FFFFFF" cx="29.5" cy="29.5" r="28.86112"></circle>
                                <polygon id="Triangle" fill="#58595B" transform="translate(34.000000, 29.000000) rotate(-270.000000) translate(-34.000000, -29.000000) " points="34 20 43 38 25 38"></polygon>
                            </svg>
                            <?php _e( 'ontdek mijn verhaal', 'copro' ) ?>
                        </a>
                    </div>
                    <svg class="arrow-next" width="62px" height="124px" viewBox="0 0 62 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <path d="M62,0 L62,124 C27.7583455,124 0,96.2416545 0,62 C0,27.7583455 27.7583455,0 62,0 L62,0 Z" id="Combined-Shape" fill="#93C119"></path>
                            <polyline id="Path-3" stroke="#FFFFFF" stroke-width="2.4" points="31 47 46 61 31 75"></polyline>
                    </svg>
                </div>

            <?php endwhile;
            wp_reset_postdata(); ?>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-content">                  
              <div class="modal-body">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>        
                  <iframe class="embed-responsive-item" width="560" height="315" src="" id="video" allowscriptaccess="always" allowfullscreen="allowfullscreen" allow="autoplay"></iframe>      
              </div>
            </div>
        </div> 
    </div>

<?php $myvariable = ob_get_clean();
return $myvariable;
}
}
add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );

```

**testimonials.js**

```
jQuery(document).ready(function($) {
    $(window).on('resize', function() {
        prefooterHeight = $('.block__prefooter').outerHeight();
        prefooterTop = prefooterHeight / 2;
        $('.block__prefooter').css('top', prefooterTop);
    }).trigger('resize');

    $('.getuigenissen__wrapper').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 7000,
        adaptiveHeight: true,
        prevArrow: $('.arrow-prev'),
        nextArrow: $('.arrow-next'),
    });

    var videosrc;
    $('.getuigenis__video').click(function() {
        videosrc = $(this).data( "src" );
        console.log(videosrc);
        url = "https://player.vimeo.com/video/" + videosrc + "?title=0&byline=0&portrait=0";
        console.log(url);
    });

    if ( $('#myModal').hasClass('in') ) {
        $("#video").attr('src',url );
        $('html').css('overflow', 'hidden');
    } else {
        $("#video").attr('src',videosrc);
        $('html').css('overflow', 'visible');
    }
});

```