Embed instagram video using requirejs

Question

I'm trying to embed instagram video into my Single Page Application using requirejs.

The embed piece of code from instagram is as follow :

<\blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" bunch of css ">bunch of html<\/blockquote>
<\script async defer src="//platform.instagram.com/en_US/embeds.js"><\/script>

Now all I need to do to display instagram's post on my website is to include <\blockquote> in my html, and be able to load //platform.instagram.com/en_US/embeds.js script.

The problem is that since I'm using requirejs, I can't just put the <\script> tag in the html, I have to load it using require. To do so I tried these solutions :

I created a js file using "//platform.instagram.com/en_US/embeds.js" code. In require.config.js :

  paths: {"instagram-embed": "/path/to/embed.js/file"}

and just including it in my viewModel :

define(["instagram-embed"], function(){});

This solution doesn't work.

I also tried loading it with the async plugin :

define("async!http://platform.instagram.com/en_US/embeds.js", function(){} 

requirejs just timeout when trying to load it.

I'm out of ideas. Please help.

Answer 1

I've found a working solution but it's not realy clean.

The thing is that instagram embbed need to be "activated" using window.instgrm.Embeds.process(); after //platform.instagram.com/en_US/embeds.js inclusion.

I still can't load the module using require, still timeout on file inclusion, but I manage to make it work by including it through a <script> tag in my index.html :

        /* REQUIRE CONFIG AND STARTUP */
        <script src="app/require.config.js"></script>
        <script data-main="app/startup" src="bower_modules/requirejs/require.js"></script>

        /* INSTAGRAM EMBBEDS */
        <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
        <script type="text/javascript">
            function instagramEmbbedCheck() {
                if (typeof window.instgrm === 'undefined')
                    setTimeout(instagramEmbbedCheck, 3000);
                else
                    window.instgrm.Embeds.process();
            }
            instagramEmbbedCheck();
        </script>

I need to use a setTimeout of at least 2 seconds for this to work and it's kind of a big problem. For now it's the only way I found to use instagram embbeds in my website through require (not realy through requirejs...)