Instagram embeds no longer displaying in WordPress posts/pages

[alisterscott]

Embedding an Instagram post no longer displays.

Example post: ​https://calypsojetpackbleedingedge.mystagingwebsite.com/2018/08/ig/

Console error is:

Refused to display 'https://www.instagram.com/p/BlMg3iolq9e/?utm_source=ig_embedembed/captioned/?cr=1&v=9&wp=1044&rd=calypsojetpackbleedingedge.mystagingwebsite.com#%7B%22ci%22%3A0%2C%22os%22%3A1685.1000000024214%7D' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

The iFrame generated by WordPress is:

<iframe class="instagram-media" id="instagram-embed-0" src="https://www.instagram.com/p/BlMg3iolq9e/?utm_source=ig_embedembed/captioned/?cr=1&amp;v=9&amp;wp=1044&amp;rd=calypsojetpackbleedingedge.mystagingwebsite.com#%7B%22ci%22%3A0%2C%22os%22%3A1685.1000000024214%7D" allowtransparency="true" frameborder="0" height="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: white; max-width: 525px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px; min-width: 326px; padding: 0px; position: absolute;"></iframe>

adding embed on the end of the URL in the iFrame allows this to work:

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BlMg3iolq9e/embed?utm_source=ig_embedembed/captioned/?cr=1&amp;v=9&amp;wp=1044&amp;rd=calypsojetpackbleedingedge.mystagingwebsite.com#%7B%22ci%22%3A0%2C%22os%22%3A1685.1000000024214%7D" allowtransparency="true" frameborder="0" height="726" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: white; max-width: 525px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"></iframe>

[pento]

Thanks for the report, @alisterscott!

This is caused by Instagram.

Their ​oEmbed response has added ?utm_source=ig_embed to the URL, which the JavaScript they use to generate the iframe doesn't allow for, hence embed/ appearing after that URL parameter in the iframe src, rather than before. Until they remove the URL param, or update their JS to allow for it, Instagram embeds are going to be broken.

Unfortunately, there's not a lot we can do about this, Instagram have broken embeds for everyone, not just WordPress:

​https://twitter.com/search?f=tweets&vertical=default&q=instagram%20embed&qf=off