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 >
 <a href="#" >Show Video</a> 
            <div ><iframe src="https://player.vimeo.com/video/135846546?h=482cfdfd90" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>                       
        </article>

        <div >
            <div ></div>
            <div >
                <span >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.

CodePudding user response：

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);