Cannot embed with options on Medium / Embedly

[gfox1984]

Hi,

I wanted to use codesandbox to share and run code on my medium article, but it seems that no matter what option I put in my embed URL, they are just ignored and I end up with a lone preview :(

Eg: if I use:

https://codesandbox.io/embed/sample-1-9ii0rr?hidenavigation=1&module=%2Fsrc%2FFireButton.tsx&view=split, I

I get the same result as if I just used:

https://codesandbox.io/embed/sample-1-9ii0rr

With these options, I would expect to see this instead:

If what I read is correct, Medium uses Embedly to embed content. And I can confirm that the same behaviour is observed on Embedly: https://embed.ly/code?url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fsample-1-9ii0rr%3Fhidenavigation%3D1%26module%3D%252Fsrc%252FFireButton.tsx%26view%3Dsplit

Is there anything you can do to improve the support for options when embedding in Medium articles? Without this, codesandbox is pretty much useless for authors on Medium :(

[aj-foster]

Hello there!

I took a look at this, and I'm kind of puzzled by what Embedly is doing. In your linked example, you clearly added a number of query params to the request URL. However, if you look at the iframe shown on the page, it has this src:

https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F9ii0rr&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2F9ii0rr&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F9ii0rr%2Fscreenshot.png&key=fd92ebbc52fc43fb98f69e50e7893c13&type=text%2Fhtml&card=1&schema=codesandbox

The important part is the src attribute in that URL (decoded for easy reading):

https://codesandbox.io/embed/9ii0rr

As you've noticed this, is the embed URL without the query parameters. (Any of them.)

Now if you make a request to our OEmbed API endpoint, we can compare the results:

// curl https://codesandbox.io/oembed\?url\=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fsample-1-9ii0rr%3Fhidenavigation%3D1%26module%3D%252Fsrc%252FFireButton.tsx%26view%3Dsplit | jq
{
  "author_name": "gfox1984",
  "author_url": "https://codesandbox.io/u/gfox1984",
  "height": 500,
  "html": "<iframe width=\"1000\" height=\"500\" src=\"https://codesandbox.io/embed/sample-1-9ii0rr?hidenavigation=1&module=%2Fsrc%2FFireButton.tsx&view=split\" style=\"width:1000px; height:500px; border:0; border-radius: 4px; overflow:hidden;\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"></iframe>",
  "provider_name": "CodeSandbox",
  "provider_url": "https://codesandbox.io",
  "thumbnail_height": "630",
  "thumbnail_url": "https://codesandbox.io/api/v1/sandboxes/9ii0rr/screenshot.png",
  "thumbnail_width": "1200",
  "title": "sample-1",
  "type": "rich",
  "version": "1.0",
  "width": 1000
}

Notice the iframe has a src with the full URL — and not just query parameters, but a different base URL too. It's an abbreviated version of the one we return from the API, with just the sandbox ID and no alias attached. Even worse, I looked up the request that Embedly made to our API in our logs:

{
  "status": 200,
  "path": "/oembed",
  "params": {
    "url": "https://codesandbox.io/s/hyrcs",
    "format": "json"
  },
  "method": "GET",
  // ...
}

This means Embedly isn't using our oembed API with the URL you give, but rather a calculated URL they decide. Unfortunately it doesn't include query parameters. I need to reach out to Embedly's support folks, and you might want to do the same.

[gfox1984]

Thanks for the clarification!

I logged the issue here originally because I thought you might be the one developing the provider for Embedly. I'll try to reach to them then.

[gfox1984]

FYI, Embedly replied to my support request:

Thanks for checking in. I have made a fix, but it will be integrated into the next build(I do not have a timeframe on when this will be deployed yet). Please see the API test logs below:

{ "provider_url": "https://codesandbox.io/", "description": "sample-1 by gfox1984 using react, react-dom, react-scripts", "title": "sample-1", "type": "rich", "thumbnail_width": 1200, "height": 500, "width": 1000, "html": "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fsample-1-9ii0rr%3Fhidenavigation%3D1&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2F9ii0rr&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F9ii0rr%2Fscreenshot.png&key=internal&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "author_name": "gfox1984", "version": "1.0", "provider_name": "CodeSandbox", "thumbnail_url": "https://codesandbox.io/api/v1/sandboxes/9ii0rr/screenshot.png", "thumbnail_height": 630, "author_url": "https://codesandbox.io/u/gfox1984" }

It should be able to respect the additional parameters. I will let you know since once deployed, I will have to test it again.

[aj-foster]

That's fantastic! If you see it in the while before we do, please let us know. Thanks for taking the time to coordinate with their support.

[gfox1984]

Looks like the issue I reported is now fixed on Embedly! See: https://embed.ly/code?url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fsample-1-9ii0rr%3Fhidenavigation%3D1%26module%3D%252Fsrc%252FFireButton.tsx%26view%3Dsplit

And it also works on Medium now:

[aj-foster]

Awesome work @gfox1984, thank you for working with Embedly's support to get this fixed. You got further than we did. 🙂