Embed instagram not transformed to amp-instagram

[ghost]

When embedding an instagram post as blockquote:

<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-permalink="https://www.instagram.com/p/BhsgU3jh6xE/" data-instgrm-version="8">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;">
<div style="background: url(data:image/png; base64,ivborw0kggoaaaansuheugaaacwaaaascamaaaapwqozaaaabgdbtueaalgpc/xhbqaaaafzukdcak7ohokaaaamuexurczmzpf399fx1+bm5mzy9amaaadisurbvdjlvzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8ueowds88ly97kqytlijkktuybbruayvh5wohixmpi5we58ek028czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif/gwufyy8owepdyzsa3avcqpvovvzzz2vtnn2wu8qzvjddeto90gsy9mvlqtgysy231mxry6i2ggqjrty0l8fxcxfcbbhwrsyyaaaaaelftksuqmcc); display: block; height: 44px; margin: 0 auto -44px; position: relative; top: -22px; width: 44px;"></div>
</div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BhsgU3jh6xE/" target="_blank" rel="noopener">First meeting. Fast friends. #TRACYMORGANFREEMAN</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">A post shared by <a style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px;" href="https://www.instagram.com/realtracymorgan/" target="_blank" rel="noopener"> Tracy Morgan</a> (@realtracymorgan) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2018-04-18T02:41:18+00:00">Apr 17, 2018 at 7:41pm PDT</time></p>

</div></blockquote>
<script async defer src="//instagram.com/embed.js"></script>

There is no amp-instragram transformation taking place.
I think right now it's only supported the shortcuts one: amp-instagram-embed

[westonruter]

Are you pasting in that snippet into the post? You should instead be pasting in the URL to the Instagram post to embed it.

For example, if I past in a single URL into my post like this as a separate paragraph:

https://www.instagram.com/p/BhsgU3jh6xE/

Then it comes out in AMP as:

<p><amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600"></amp-instagram></p>

You can see this from the Instagram embed logic in the plugin: https://github.com/Automattic/amp-wp/blob/develop/includes/embeds/class-amp-instagram-embed.php

It's somewhat unfortunate that Instagram prompts you to copy/paste that HTML code:

But in WordPress, you should just add the URL to the Instagram post to use the oEmbed system. The same goes for Instagram in Gutenberg:

If this is a very common problem where HTML embed is used instead of oEmbed URL, then it may make sense to add a sanitizer that looks for any blockquote.instagram-media[data-instgrm-permalink] elements and converts them into amp-instagram-embed, but in the mean time I suggest you just use the URL.

[westonruter]

Fixed via #1128