Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#44688 closed defect (bug) (invalid)

Instagram embeds no longer displaying in WordPress posts/pages

Reported by: alisterscott's profile alisterscott Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Embeds Keywords:
Focuses: Cc:

Description

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>

Change History (1)

#1 @pento
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
  • Version 4.9.7 deleted

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

Note: See TracTickets for help on using tickets.