How can I display a play icon on video media?

[simran2017]

Is there a way we can show play icon on top of image which actually are videos. https://codepen.io/anon/pen/eyMpMQ in this example 5th items is video and i want to show a play button on top of thumbnail so that it stands out as video

[TristanConant]

You could use the key 'carouselVideoTemplate:' and add one in that way.

[simran2017]

Can you explain a bit more how i can do that so that i can show both image & video & videos will show play icon

[TristanConant]

Sure, sorry for the vague answer before. you could try something like this: videoTemplate: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{previewImage}}" /> <img src="your-assests-folder/play.png" class="play-btn"></a>', Then just absolutely position the play button over the preview image.

[simran2017]

I tried it but it only gets image below is the output which i get when i use following code:

var userFeed = new Instafeed({
    get: 'user',
    userId: '623597756',
    clientId: '02b47e1b98ce4f04adc271ffbd26611d',
    accessToken: '623597756.02b47e1.3dbf3cb6dc3f4dccbc5b1b5ae8c74a72',
    resolution: 'standard_resolution',
    //template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
    videoTemplate: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{previewImage}}" /> <img src="https://tinyurl.com/yagphlfv" class="play-btn"></a>',
    sortBy: 'most-recent',
    limit: 6,
    links: false
  });
  userFeed.run();

<div id="instafeed">
<img src="https://scontent.cdninstagram.com/vp/9e72cefd77eb87ddc6eaa758e5e57cea/5AE7CDC6/t51.2885-15/s640x640/sh0.08/e35/25009224_2438610366363418_174748629997715456_n.jpg"><img src="https://scontent.cdninstagram.com/vp/bb0ea0a0bb05ed7dbc3c76f9aad97de3/5ADA3431/t51.2885-15/s640x640/sh0.08/e35/22709406_146616869283363_7978134161590321152_n.jpg"><img src="https://scontent.cdninstagram.com/vp/1d82d6aa1ff3f075d6510fa2a68f6038/5AF27B5A/t51.2885-15/s640x640/sh0.08/e35/22580272_122373718445331_6333347435967938560_n.jpg"><img src="https://scontent.cdninstagram.com/vp/c589611f6c83a90cf54a01ba9732ff17/5AE0A19A/t51.2885-15/sh0.08/e35/p640x640/20181007_227380134450879_5993686711937269760_n.jpg"><img src="https://scontent.cdninstagram.com/vp/99c52601531e6245acf86bc7b39e5c38/5A5D9106/t51.2885-15/s640x640/e15/19624211_100643723913065_3674250827016437760_n.jpg"><img src="https://scontent.cdninstagram.com/vp/aa0802014c13bda7675ceb287fe3d3cc/5AFB4F83/t51.2885-15/s640x640/sh0.08/e35/19623197_1344023495712718_3926959019016585216_n.jpg"></div>

Not sure if i am using the wrong js file i tried event one from your github also with same result

[dec23rd1986]

Hi all, I can't seem to figure out how to get the client ID for my client or token. Per all the examples I have seen they are using their own Instagram ID. Can someone tell me how to obtain this? Do I have to have the client request it and then send it to me?

I'm trying to put an Instagram feed carousel on the homepage of their website.

[simran2017]

Follow this article for generating client id https://andrewrock.github.io/recreating-instagram.html

[dec23rd1986]

@simran2017 Hi Simran,

I have my clients sandbox acceptance, as well i had them accept my sandbox. So I have access. I'm following the steps correctly, however when I am trying to generate the token myself, it includes my client ID rather than my friends client ID. Do you know how I can get around that?

[benjamin-hull]

Hi @dec23rd1986 - an access token currently gives only access to that user's own media. The easiest way around this is to have your friend generate their own access token and provide it to you.