Support

Account

Home Forums Add-ons Repeater Field Youtube videos slider with popup modal

Unread

Youtube videos slider with popup modal

  • 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;}
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.