I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

var feed = new Instafeed({
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    limit: 16,
    get: 'tagged',
    tagName: 'teamRousey',
    sortBy: 'most-recent',
    after: function () {
        var images = $("#instafeed").find('a');
        $.each(images, function(index, image) {
            var delay = (index * 75) + 'ms';
            $(image).css('-webkit-animation-delay', delay);
            $(image).css('-moz-animation-delay', delay);
            $(image).css('-ms-animation-delay', delay);
            $(image).css('-o-animation-delay', delay);
            $(image).css('animation-delay', delay);
            $(image).addClass('animated flipInX');
        });
    },
    template: '<video controls ><source src="{{video}}embed/" type="video/mp4"></video>"<div class="likes">&hearts; {{likes}}</div>'
});

feed.run();

I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

var feed = new Instafeed({
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    limit: 16,
    get: 'tagged',
    tagName: 'teamRousey',
    sortBy: 'most-recent',
    after: function () {
        var images = $("#instafeed").find('a');
        $.each(images, function(index, image) {
            var delay = (index * 75) + 'ms';
            $(image).css('-webkit-animation-delay', delay);
            $(image).css('-moz-animation-delay', delay);
            $(image).css('-ms-animation-delay', delay);
            $(image).css('-o-animation-delay', delay);
            $(image).css('animation-delay', delay);
            $(image).addClass('animated flipInX');
        });
    },
    template: '<video controls ><source src="{{video}}embed/" type="video/mp4"></video>"<div class="likes">&hearts; {{likes}}</div>'
});

feed.run();

• javascript
• html
• instagram

• 4 Stupid question deserves stupid answer: Yes it's possible – Endless Commented Nov 26, 2015 at 0:29
• 2 Well it's not a stupid question to me because I didn't know That's why I asked is this difficult to do can it be done through javascript – A Kel Commented Nov 26, 2015 at 0:31
• 1 Show us what you got so far. – Endless Commented Nov 26, 2015 at 0:36
• 1 Basically. 1) get the video src. 2) play it in a <video> tag – Endless Commented Nov 26, 2015 at 0:37
• 1 I can help you tomorrow If you still need help after reading this or someone else dosen't helps you. But its 2AM here and i'm going to bed now. You know if it's a video or a images so it's doable – Endless Commented Nov 26, 2015 at 1:05

1 Answer 1

Here we go.

jQuery(function($){

    var feed = new Instafeed({
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        limit: 16,
        get: 'tagged',
        tagName: 'teamRousey',
        sortBy: 'most-recent',
        after: function () {
            
        },
        resolution: 'standard_resolution',
        filter: function(image) {
            if (image.type == 'image') {
                image.template = '<img src="' + image.images.standard_resolution.url + '" />';
            } else {
                image.template = '<video width="100%" controls loop><source src="' + image.videos.standard_resolution.url + '" type="video/mp4"/></video>';
            }
            return true;
        },
        template: '<header>{{model.template}}</header><footer><a href="http://instagram./{{model.user.username}}">@{{model.user.username}}</a><br>{{caption}}</footer>',

    });

    feed.run();

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jsonp.afeld.me/?url=http%3A%2F%2Finstafeedjs.%2Fjs%2Finstafeed.min.js"></script>
<div id="instafeed"></div>