Photoswipe close when click

Question

I've got a problem when I click on a photo then photoswipe active normally

But when I want to close by click outside the video player. It's not working. It's work fine for image slide but when video it's not work anymore.

Please help I really don't know how to fix this.

and this is my Photoswipe JS code

var parseThumbnailElements = function(el) {
    var items = [];
    var item;
    el.each(function(){
        if ($(this).attr('href').match(/youtube/)) {
             item = {
                html:  '<div class="d-flex justify-content-center w-100 h-100">' +
                '<iframe width="80%" height="100%" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
                '</div>'
            };
        } else {
             item = {
                src: $(this).attr('href'),
                w: $(this).data('w'),
                h: $(this).data('h'),
                msrc: $(this).find('img').attr('src')
            };
        }
        item.el = $(this);
        items.push(item);
    });

    return items;
};

var openPhotoSwipe = function(el) {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var index = el.eq();
    // build items array
    var items = parseThumbnailElements(el);

    // define options (if needed)
    var options = {
        index: index,
        getThumbBoundsFn: function(index) {

            // See Options -> getThumbBoundsFn section of documentation for more info
            var thumbnail = items[index].el.find('img').get(0), // find thumbnail
                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                rect = thumbnail.getBoundingClientRect();

            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
        }
    };

    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

(function($){
    $(document).on('click', '.photoswipe', function(e){
        e.preventDefault();
        // if image object do this
        if ($(this).hasClass('image-gallery__img--show')) {
            openPhotoSwipe($(this).closest('.image-gallery__img').find('.photoswipe'));
        } else {
            // if video then to this
            openPhotoSwipe($(this));
        }
    });
})(jQuery);

Answer 1

1. Why I can't click around the iframe to close ?

I just change it from

item = {
    html:  
        '<div class="d-flex justify-content-center w-100 h-100">' +
            '<iframe width="80%" height="100%" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
        '</div>'
};

to

item = {
    html:
        '<div class="video-wrapper">' +
            '<div class="video-wrapper-inside">' +
                '<iframe width="960" height="640" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
            '</div>' +
        '</div>'
};

.video-wrapper {
    line-height: 0;
    width: 100%;
    max-width: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.video-wrapper-inside {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    width: 100%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

2. How to close video with iframe stop playing

Just add this close function after gallery.init();

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();

    gallery.listen('close', function() {
      $('iframe').each(function() {
        $(this).attr('src', $(this).attr('src'));
      });
    });