Add iframe support

[Kikobeats]

Overview

Officially, iframe has landed into Microlink API 🎉.

Now is the turn to leverage the functionality into SDK.

In order to enable it, just need to pass iframe: true as query parameter

 const { status, data, response } = await mql(
    'https://www.youtube.com/watch?v=9P6rdqiybaw', {
      iframe: true
  })

Additionally, iframe options can be passed as an object:

 const { status, data, response } = await mql(
    'https://www.youtube.com/watch?v=9P6rdqiybaw', {
      iframe: { width: 480, height: 270 }
  })

This can be used by some provider in order to customize the output

After that, the payload returns a new data field called iframe with the embeddable code to be inserted as markup, e.g.:

{
  "iframe": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/9P6rdqiybaw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
}

Requeriments

Implement iframe in a way that, when is present, the card output will be native iframe provided by the service instead of the common Microlink card visualization.

<Microlink 
  url='https://www.youtube.com/watch?v=9P6rdqiybaw' 
  media='iframe' 
/>

Consideraations

iframe is not widely supported by internet

Most of the URLs don't return an iframe and it isn't possible to determinate before performing the API call.

That means iframe support needs to support the common card visualization as a fallback.

I suggest keep using media prop for that:

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  media={['iframe', 'image']}
/>

Although a new prop can be added:

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  preferMode={['iframe', 'card']}
/>

In fact, need to find a way to be possible pass iframe settings

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  preferMode={['iframe', 'card']}
  iframe={{ width 480, height: 270 }}
/>

If we need to choose, I prefer to don't extend the current API surface and find a way to accommodate the functionality with the things we have.

iframe is not actually an iframe

You can't believe iframe is going to be the root HTML element node all the time.

e.g., consider the following API call: https://api.microlink.io/?url=https://view.genial.ly/5dc53cfa759d2a0f4c7db5f4&iframe

The root node here is a wrapper for control the iframe responsive ¯_(ツ)_/¯

iframe skeleton loader time

As the same way we are showing a loading skeleton until the data is fetched from API properly:

We need to do the same until the iframe markup is mounted and ready for displaying the media.

This can be done adding an event listener to iframe HTML element: https://github.com/microlinkhq/www/blob/master/src/components/elements/IframeInline/IframeInline.js#L16

We can reuse the current card skeleton loader we have for the card since actually we don't know if we can mount an iframe until the API call is performed.

[Kikobeats]

Added Twitter demo (thanks @breadadams!)

I think we can ship an API field with the iframe ready to be embed.

For example, this could be the API payload from a target Youtube video

// 20180303170707
// http://localhost:3000/?url=https://www.youtube.com/watch?v=hwMkbaS_M_c

{
  "status": "success",
  "data": {
    "lang": null,
    "author": "ONE Media",
    "title": "Star Wars 8 THE LAST JEDI Official TRAILER (2017) Daisy Ridley, Disney Movie HD",
    "publisher": "YouTube",
    "image": {
      "width": 1280,
      "height": 720,
      "type": "jpg",
      "url": "https://img.youtube.com/vi/hwMkbaS_M_c/maxresdefault.jpg"
    },
    "embed": "<iframe width='560' height='315' scrolling='no' frameborder='no' src='https://www.youtube-nocookie.com/embed/hwMkbaS_M_c' frameborder='0' allowfullscreen></iframe>",
    "description": "Star Wars 8 THE LAST JEDI Official TRAILER (2017) Daisy Ridley, Disney Movie HD\n© 2017 - Disney",
    "date": "2018-03-02T12:00:00.000Z",
    "video": null,
    "logo": {
      "width": 144,
      "height": 144,
      "type": "png",
      "url": "https://s.ytimg.com/yts/img/favicon_144-vfliLAfaB.png"
    },
    "url": "https://www.youtube.com/watch?v=hwMkbaS_M_c"
  }
}

So we can build the card preview and, after user click, replace the card content with the embed content.

[deikka]

Hi! Do you have any update on this? Is going to be a feature soon? Thanks!

[Kikobeats]

Hey,

Since Microlink API has audio parameter as well, is a good moment to start moving this forward!

I don't have an estimation, but my original idea is first to implement this on API level, then use the SDK to retrieve the new embed field.

In the middle time, you can use one of the libraries we suggest at first comment – the problem with this approach is it will going to add more code in your client side.

Please subscribe this issue, it will be updated ASAP