如何使用 PhotoSwipe 显示视频？

如何解决如何使用 PhotoSwipe 显示视频？

尝试在 photowipe 中弹出视频和图像。我有图像工作，但不知道如何让视频工作。 我猜我需要检查数据类型，如果它等于视频，它存储数据视频内容，然后将其输出到滑块中？ 但我无法让它工作。

感谢任何帮助

<div class="grid popup-gallery">
    <div class="grid-sizer"></div>  
        <?PHP if($content_type == 'image') :  ?>
            <div class="grid-item <?PHP echo $content_size; ?> <?PHP echo $filter; ?>" data-category="transition" data-index="<?PHP echo $i; ?>">
                <img data-size="<?PHP echo $image['width']; ?>x<?PHP echo $image['height']; ?>"  class="full-width" src="<?PHP echo $image['url']; ?>" alt="<?PHP echo $image['alt']; ?>">
                <div class="hover-text">
                    <span>VIEW FULL SCREEN</span>
                </div>
            </div>
        <?PHP else : ?>
            <div class="grid-item <?PHP echo $content_size; ?> <?PHP echo $filter; ?>" data-category="transition" data-index="<?PHP echo $i; ?>">
                <a href="#" data-type="video" class="video-link" data-video='<div class="wrapper"><div class="video-wrapper video-position"><iframe class="pswp__video" width="960" height="640" src="https://player.vimeo.com/video/<?PHP echo $video_link; ?>" frameborder="0" allowfullscreen></iframe></div></div>'>
                    <video class="d-block full-width" muted autoplay loop playsinline src="<?PHP echo $video_thumbnail; ?>"></video>
                    <img class="full-width d-none" src="https://placehold.it/960x500?text=Vimeo">
                </a>
            </div>
        <?PHP endif; ?>
    </div>
</div>

  var items = [];

  function updateItems() {
    items = [];
    $(".popup-gallery").each(function () {
      var $pic = $(this),getItems = function () {
          $pic
            .find(".grid-item:not([style*='display: none'])")
            .each(function () {
              if ($(this).data("type") == "video") {
                item = {
                  html: $(this).data("video"),};
              } else {
                var $href = $(this).find("img").attr("src"),$size = $(this).find("img").data("size").split("x"),$width = $size[0],$height = $size[1];
                var item = {
                  src: $href,w: $width,h: $height,};
              }

              items.push(item);
            });
          return items;
        };

      items = getItems();
    });
  }

  updateItems();

  function opengallery(items,options) {
    var markup = $(".pswp").get(0);
    var gallery = new photoswipe(markup,photoswipeUI_Default,items,options);
    gallery.init();
  }

  var $index = 0;
  var options = {};
  $(document).on(
    "click",".grid-item:not([style*='display: none'])",function (event) {
      event.preventDefault();

      $index = parseInt($(this).data("index"));
      options = {
        index: $index,bgOpacity: 0.7,showHideOpacity: true,modal: false,cloSEOnScroll: false,cloSEOnVerticalDrag: false,};

      options.index = parseInt($(this).data("index"));
      opengallery(items,options);
    }
  );