"Play All" with Magnific Popup

Playing multiple vimeo videos in a loop with Magnific Popup

by kiokotzu

HTML

<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<a href="#playall" class="play-all">Play All</a>

<br/>
<a href="https://vimeo.com/80836225" class="play-single">Play Single</a>

JavaScript

$(".play-single").magnificPopup({
        type: "iframe"
    });

    var items = [{
        src: "https://vimeo.com/81182222"
    }, {
        src: "https://vimeo.com/80736183"
    }, {
        src: "https://vimeo.com/80101893"
    }];

    $(".play-all").each(function () {
        $(this).magnificPopup({
            type: "iframe",
            items: items,
            gallery: {
                enabled: true
            },
            // override the default vimeo service to activate the player api
            iframe: {
                patterns: {
                    vimeo: {
                        index: 'vimeo.com/',
                        id: '/',
                        src: '//player.vimeo.com/video/%id%?autoplay=1&api=1&player_id=playall'
                    },
                }
            },
            callbacks: {
                open: function () {
                    var iframe = $(this.content).find("iframe").attr("id", "playall")[0],
                        player = $f(iframe),
                        magnificInstance = this;

                    // set up the handlers
                    player.addEvent('ready', function (id) {
                        player.addEvent('finish', function () {
                            magnificInstance.next();
                        });
                    });
                }
            }
        })
    });