如何使用MagnificPopup播放Instagram视频

我正在尝试使用Instafeed.js从Instagram捕获图像和视频到Swiper Slider和onclick事件中,我已经设法通过MagnificPopup.js在弹出窗口中打开图像。但是,我也无法显示视频,而只能显示图像。有谁知道一种更好的方法来在滑块中显示来自Instagram的图像和/或视频并将其显示在弹出画廊中? 我希望能在弹出窗口中显示视频时有所帮助。 这是我的代码:

$(document).ready(function($) {


    var userFeed = new Instafeed({
        get: 'user',userId: 'USERID',limit: 100,resolution: 'standard_resolution',accessToken: 'accESS_TOKEN',sortBy: 'most-recent',template: '<div class="swiper-slide instaimg popup-gallery"><a href="{{image}}" title="{{caption}}" target="_blank" id="{{id}}"><span class="overlay-insta"><span class="overlay-txt"><i class="fa fa-heart-o fa-lg-insta"></i><span class="overlay-txt-lg">{{likes}}</span><br><br>@{{model.user.username}}</span></span><img src="{{image}}" alt="{{caption}}" class=""/></a></div>',after: function () {

                var swiper5 = new Swiper('.swiper5',{
                      autoHeight: true,spaceBetween: 0,//pagination: {
                            //el: '.swiper-pagination',//clickable: true,//},loop: true,speed:2000,autoplay: {
                                delay: 3000,},// Default parameters
                      slidesPerView: 3,spaceBetween: 10,breakpoints: {
                        1024: {
                          slidesPerView: 3,spaceBetween: 5,768: {
                          slidesPerView: 2,480: {
                          slidesPerView: 2,320: {
                          slidesPerView: 2,}
                      }
                    });
            }
    });


    userFeed.run();

}); 
$(document).ready(function ($) {
    // This will create a single gallery from all elements that have class "gallery-item"
    $('.popup-gallery').magnificPopup({
        delegate: 'a',type: 'image',tLoading: 'Loading image #%curr%...',mainClass: 'mfp-img-mobile',gallery: {
            enabled: true,navigateByImgClick: true,preload: [0,1] // Will preload 0 - before current,and 1 after the current image
        },image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',titleSrc: function(item) {
                return  '<br>'+'<a href="https://www.instagram.com/username/" target="_blank"><i class="fa fa-instagram fa-lg-insta"></i> <span class="follow">Follow Us</span></a>'+'<br><br>' + item.el.attr('title');
            }
        }
    });
}); 

https://github.com/DannaB67/INSTAFEED-AND-MAGNIFICPOPUP-TO-DISPLAY-VIDEOS-AND-IMAGES

zhaixin411 回答:如何使用MagnificPopup播放Instagram视频

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3027460.html

大家都在问