Problems using WP’s oembed function + Instagram + AJAX

I am using a modal to load post content via AJAX. Inside the post’s template I am using wp_oembed_get() to embed different types of media (YouTube, Vimeo, Flickr, and Instagram). Everything is working, except for Instagram.

When I open a post that contains an Instagram embed, it loads fine. But if I close the modal and try to load another post, the embed does not work correctly. The photo/video within the embed does not load.

This is the page: http://staging.smuttynose.com/the-hopper

If you open one of the “Instagram Test” posts, close it, then load the other one, you will see what is happening.

I’m at the end of my rope in figuring this out!

Instagram has changed its embed code from being just an iframe to a bunch of HTML and a JS script. Very inelegant, but nothing we can do. This setup, of course, fails when called through AJAX since the JS file that’s part of the HTML does not run. Thankfully there is another official way to make it work with AJAX in two steps:

1. Include this scripts in your HMTL:

   <script src="https://platform.instagram.com/en_US/embeds.js"></script>

2. Runs this JS after you load the content with AJAX:

   if ( typeof window.instgrm !== 'undefined' ) {
window.instgrm.Embeds.process();
}

What it does is, it looks for Instagram embeds and loads them. Best of luck!