[FIXED] How to pause Vimeo video on click with jQuery?

Issue

How to pause Vimeo video on click with jQuery? Can't make vimeo video pause when close the popup window (video is keep plying).

One more question is how to prevent blinking video popup window. This bug appear when we have few videos (looks like script goes through few elements before showing correct video). Please see attached jsfiddle.

UPD: 'Blinking bug' also appear only with one video in loop - https://jsfiddle.net/Okean/txh4ckme/30/

 <article class="bgr_blogposts-post videoTag">
 <a href="#" class="show_video">Show Video</a> 
            <div class="bgr_blogposts-videosource"><iframe src="https://player.vimeo.com/video/135846546?h=482cfdfd90" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>                       
        </article>

        <div class="showvideo">
            <div class="overlay"></div>
            <div class="vid-show">
                <span class="close">X</span>
                <iframe src="" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" id="video" allowfullscreen> </iframe>  
            </div>
        </div>

$(function () {
    "use strict";
    $(".videoTag").click(function () {
        var $srcvid = $(this).find("iframe").attr("src");
        // alert($srcvid); 
        $(".showvideo").fadeIn();
        $(".vid-show iframe").attr("src", $srcvid);

    });
    
    $(".close, .overlay").click(function () {
        $(".showvideo").fadeOut();
        $('#video').trigger('pause');
    });
    
});

Here is code on jsfiddle: https://jsfiddle.net/Okean/txh4ckme/28/ Thanks a lot for help.

Solution

First of all, it seems that it is possible to change the src to pause when clicking elsewhere.

$(".close, .overlay").click(function () {
    $(".showvideo").fadeOut();
    //$('#video').trigger('pause');
    
    $(".vid-show iframe").attr("src", "");
});

and The Blinking bug seems to be because the video screen appears before the iframe is loaded.

    $(".vid-show iframe").attr("src", $srcvid);
    setTimeout(function(){
     $(".showvideo").fadeIn();
    }, 500);

Answered By - young2

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)