Youtube videos slider with popup modal

• GDdesign

• October 8, 2020 at 7:41 pm

Hello , i need to create a videos slider. i am using with the Repeater Field,
the slider is working, the popup modal works But –
What i have the problem that i can’t figure it out is how to create that if click on one of the images of the slider the popup show up and the specific youtube video will display for the client (what he choose).

i will very very appreciat for your help….
and this is the markup & scripts at that point

HTML Markup

    <section class="portfolio-content-container">
        <div class="site-grid">
            <div class="portfolio-content-wrraper">
               <h1><?php the_field('portfolio-main-title'); ?></h1>
            <div class="portfolio-videos-content-wrraper">
                <?php if( have_rows('portfolio-video-projects-repeater') ){ ?>
                    <?php  while ( have_rows('portfolio-video-projects-repeater') ) { the_row(); ?>     
                        <div class="video-project-holder">
                            <div class="project-image-holder">
                               <img src="http://img.youtube.com/vi/<?php the_sub_field('portfolio-video-project-code') ?>/hqdefault.jpg" >
                            </div>
                        </div>
               <?php }  ?>
            <?php }  ?> 
            </div>
            </div>
        </div>
        <!-- Youtube Popup -->
        <div class="project-video-popup">
          <div class="popup-video-wrraper">
                <div class="close"><span class="ti-close"></span></div>
                <?php if( have_rows('portfolio-video-projects-repeater') ){ ?>
                    <?php  while ( have_rows('portfolio-video-projects-repeater') ) { the_row(); ?>
                <iframe id="projectVideo" width="560" height="315" src="https://www.youtube.com/embed/<?php the_sub_field('portfolio-video-project-code') ?>?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
               <?php }  ?>
            <?php }  ?> 
          </div>
        </div>
        <!-- End Youtube Popup --> 
    </section>

JS – Jquery

   // POPUP YOUTUBE VIDEO
    $('.project-image-holder').click(function(){
        
        //vars
        var youtubeUrl = $("#projectVideo").attr('src');
        $("#projectVideo").attr('src', youtubeUrl);

        $('.project-video-popup').addClass('show');
    });
     $('.popup-video-wrraper .close').click(function(){
        $('.project-video-popup').removeClass('show');  
        var stopVideo = function(player) {
            var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0');
            player.prop('src', vidSrc);
        };

          stopVideo($('.popup-video-wrraper iframe'));        
    }); 

CSS – if will be needed

/** Portfolio **/
.portfolio-content-wrraper {margin-top: 10%;}
.portfolio-content-wrraper h1{text-align: center; font-size: 2.25em; margin-bottom: 40px;}
.project-image-holder{position: relative; cursor: pointer;}
.project-image-holder::after {content: "\01F892";font-size: 70px;position: absolute;top: 50%;left: 50%;color: #000;transform: translate(-50%, -50%);
	background: #fff;margin: 0;line-height: 50%;border-radius: 50%;width: 80px;height: 80px;box-sizing: border-box;padding: 17px 26px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.8);transition:all ease 0.5s;}

.project-image-holder:hover::after{background: #1490d7;color:#fff;}
.project-image-holder img {width: 100%;height: 100%;object-fit: cover;}
.portfolio-content-container {position: relative;}

/** Popup up **/
.project-video-popup {position: fixed;background: rgba(0,0,0,0.5);width: 100%;height: 100%;top: 0;left: 0;z-index: 200; opacity:0; visibility: hidden;
transition:all ease 0.5s; }
.project-video-popup.show{opacity: 1; visibility: visible;}
.popup-video-wrraper {position: absolute;top: 50vh;left: 50vw;background: #fff;padding: 10px;transform: translate(-50% , -50%);
	width: 1100px;height: 600px;}
.popup-video-wrraper iframe{width: 100%; height: 100%;}
.popup-video-wrraper .close {position: absolute;color: #fff;top: -20px;right: -20px;background: #000;font-size: 13px;border: 2px solid #fff;border-radius: 50%;
	width: 30px;height: 30px;display: flex;justify-content: center;align-items: center; cursor: pointer;}
.popup-video-wrraper .close:hover{color: #129343; background: #fff; border:2px solid #129343; } 

.portfolio-videos-content-wrraper ul{font-size: 0; display: flex; justify-content: center; padding: 20px 0;}
.portfolio-videos-content-wrraper ul li{height: 15px;width: 15px;margin: 0 3px; list-style: none;}
.portfolio-videos-content-wrraper ul li button{height: 15px;width: 15px;background: #fff;border-radius: 20px;padding: 0; border: 0; border:1px solid #0C9344; cursor: pointer;}
.portfolio-videos-content-wrraper ul.slick-dots li.slick-active button{background: #0C9344; border:1px solid #0C9344; }
.portfolio-videos-content-wrraper ul.slick-dots li button::before{display: none !important;}