Why is instagram embed code only showing an instagram icon, not the image?

Question

I was wanting to embed a photo from my instagram account in to my blog. I thought it would be a simple case of copying the embed code from the photo, paste it in to my editor and off I go. This doesn't seem to be the case though. As you can see from the screenshot, I get the photo information but no photo.

If I put just an image tag in to the html the image shoes perfectly but not in the style of an instagram photo.

i.e.

<img src="https://www.instagram.com/p/BFbPlbwIceD" />

Does anyone have any ideas why the embed code isn't working. I've also tried the embed code in a plain html file and it doesn't work either, so it's not my CMS which is causing the issues, which is Umbraco.

Answer 1

(The below answer applies to local html files without a server only)

I was facing the same problem and noticed this line in the embed code:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

When I added the scheme ("http") to the source like below, the image showed up correctly.

<script async defer src="http://platform.instagram.com/en_US/embeds.js"></script>

Hope this helps.