title: Create slick slider with button that opens modal
body: <p><strong>Updated (see bottom)</strong></p>
  
  <p>I'm creating a testimonial slider with slick slider, but I need a modal inside every slide.</p>
  
  <p>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.</p>
  
  <p><strong>PHP-code (I display the testimonials with a shortcode)</strong></p>
  
  <pre><code>function dfib_getuigenissen_shortcode( $atts ) {
      ob_start();
      $query = new WP_Query( array(
          'post_type' =&gt; 'getuigenissen',
          'posts_per_page' =&gt; -1,
          'order' =&gt; 'ASC',
          'orderby' =&gt; 'rand',
      ) );
      if ( $query-&gt;have_posts() ) { ?&gt;
          &lt;div class="block__getuigenissen"&gt;
              &lt;div class="getuigenissen__wrapper"&gt;
                  &lt;?php while ( $query-&gt;have_posts() ) : $query-&gt;the_post(); ?&gt;
                      &lt;div class="getuigenis__item" style="background-image: url('&lt;?php the_field('getuigenis_foto') ?&gt;');"&gt;
                          &lt;h2&gt;&lt;?php _e( 'Getuigenissen', 'copro' ) ?&gt;&lt;/h2&gt;
                          &lt;div class="getuigenis__inner"&gt;
                              &lt;p class="getuigenis__quote"&gt;&lt;?php the_field('getuigenis_getuigenis'); ?&gt;&lt;/p&gt;
                              &lt;p class="getuigenis__info"&gt;&lt;?php the_field('getuigenis_naam');?&gt;, &lt;?php the_field('getuigenis_functie'); ?&gt;&lt;/p&gt;
                              &lt;a class="getuigenis__video" href=""&gt;&lt;?php _e( 'Bekijk de volledige video-getuigenis', 'copro' ) ?&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="getuigenis_modal"&gt;
                          &lt;div class="modal__inner"&gt;
                              &lt;?php the_field('getuigenis_video'); ?&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;?php endwhile;
                  wp_reset_postdata(); ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;?php $myvariable = ob_get_clean();
      return $myvariable;
      }
  }
  add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );
  </code></pre>
  
  <p>What is the best way to set this up and how can I get the right modal to open?</p>
  
  <p><strong>Update:</strong>
  This is what I have so far, the modal works, but the src returns unknown.
  see demo: <a href="https://copro-staging.dfib.be/" rel="nofollow noreferrer">https://copro-staging.dfib.be/</a></p>
  
  <p><strong>Testimonials.php</strong></p>
  
  <pre><code>function dfib_getuigenissen_shortcode( $atts ) {
  ob_start();
  $query = new WP_Query( array(
      'post_type' =&gt; 'getuigenissen',
      'posts_per_page' =&gt; -1,
      'order' =&gt; 'ASC',
      'orderby' =&gt; 'rand',
  ) );
  if ( $query-&gt;have_posts() ) { ?&gt;
      &lt;div class="block__getuigenissen"&gt;
          &lt;div class="getuigenissen__wrapper"&gt;
              &lt;?php while ( $query-&gt;have_posts() ) : $query-&gt;the_post(); ?&gt;
                  &lt;?php $videosrc = get_field('getuigenis_video'); ?&gt;
                  &lt;div class="getuigenis__item" style="background-image: url('&lt;?php the_field('getuigenis_foto'); ?&gt;');"&gt;
                      &lt;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"&gt;
                          &lt;g id="design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                              &lt;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"&gt;&lt;/path&gt;
                              &lt;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"&gt;&lt;/polyline&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                      &lt;div class="getuigenis__inner"&gt;
                          &lt;p class="getuigenis__info"&gt;&lt;strong&gt;&lt;?php the_field('getuigenis_naam');?&gt;&lt;/strong&gt; - &lt;?php the_field('getuigenis_functie'); ?&gt;&lt;/p&gt;
                          &lt;p class="getuigenis__quote"&gt;&lt;?php the_field('getuigenis_getuigenis'); ?&gt;&lt;/p&gt;
                          &lt;a class="getuigenis__video" href="#" data-toggle="modal" data-src="&lt;?php the_field('getuigenis_video'); ?&gt;" data-target="#myModal"&gt;
                              &lt;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"&gt;
                                  &lt;circle id="Oval" stroke="#58595B" stroke-width="1.27776" fill="#FFFFFF" cx="29.5" cy="29.5" r="28.86112"&gt;&lt;/circle&gt;
                                  &lt;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"&gt;&lt;/polygon&gt;
                              &lt;/svg&gt;
                              &lt;?php _e( 'ontdek mijn verhaal', 'copro' ) ?&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;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"&gt;
                          &lt;g id="design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                              &lt;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"&gt;&lt;/path&gt;
                              &lt;polyline id="Path-3" stroke="#FFFFFF" stroke-width="2.4" points="31 47 46 61 31 75"&gt;&lt;/polyline&gt;
                      &lt;/svg&gt;
                  &lt;/div&gt;
  
              &lt;?php endwhile;
              wp_reset_postdata(); ?&gt;
          &lt;/div&gt;
          &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-content"&gt;                  
                &lt;div class="modal-body"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                    &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;        
                    &lt;iframe class="embed-responsive-item" width="560" height="315" src="" id="video" allowscriptaccess="always" allowfullscreen="allowfullscreen" allow="autoplay"&gt;&lt;/iframe&gt;      
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  
  &lt;?php $myvariable = ob_get_clean();
  return $myvariable;
  }
  }
  add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );
  </code></pre>
  
  <p><strong>testimonials.js</strong></p>
  
  <pre><code>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&amp;byline=0&amp;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');
      }
  });
  </code></pre>