Skip to content

Microlink SDK v4.5 embeds native iframes from oEmbed providers

Kiko Beats
@kikobeats

December 29, 2019

Microlink SDK v4.5.0 can embed a provider’s native iframe instead of a link preview card. Set iframe as the media value and the SDK renders the same player Spotify, SoundCloud, or Instagram would show on their own site.
TL;DR
  • Microlink SDK v4.5.0 can embed a provider’s native iframe instead of a link preview card: set iframe as the media value.
  • media: ['iframe'] enables iframe detection, and the response carries the provider’s embed markup in html and any scripts it needs in scripts.
  • media is an array of fallbacks: the SDK uses the first value the URL can satisfy, down to image.
  • Any provider that implements the oEmbed specification works, including Spotify, SoundCloud, Instagram, and YouTube.

The card has three sizes

Microlink SDK turns every link into a preview card, displayed in one of three size variations: 'small', 'normal' and 'large'.
Microlink SDK size variations.
The card gives any website or application a consistent URL preview. Some domains, like Instagram, SoundCloud, Spotify, Facebook, and X, have their own way of embedding their content, and next to it a generic card is less recognizable.

media: ['iframe'] uses the provider’s own embed

Microlink SDK v4.5 accepts iframe as a media value. When the provider has a native embed, the SDK uses it:
The media value decides how the SDK calls the Microlink API, so the response carries the field that media type needs.
For an audio provider like SoundCloud or Spotify, media: ['audio'] tells Microlink API to detect the streaming source behind the URL by enabling the audio parameter. The response includes an audio field with the source URL, its type, duration, and size:
{
  "audio": {
    "url": "https://p.scdn.co/mp3-preview/4036341425a86cbe3fe0aa39a034ba7b6c5e4432?cid=6313d40896f64a2ead4f67035049a647",
    "type": "mp3",
    "duration": 30.040816,
    "size": 362861,
    "duration_pretty": "30s",
    "size_pretty": "363 kB"
  }
}
Here that is a 30s mp3 preview of 363 kB served from p.scdn.co, and Microlink SDK builds the audio preview card from it.
media: ['iframe'] works the same way, enabling iframe detection instead. The response includes an iframe field with the provider’s embed markup in html and any scripts it needs in scripts:
{
  "iframe": {
    "html": "<iframe width=\"300\" height=\"380\" allowtransparency=\"true\" frameborder=\"0\" allow=\"encrypted-media\" title=\"Spotify Embed: Space Spine\" src=\"https://open.spotify.com/embed/album/49ax7HUaKuueaVtZBkEZD4?highlight=spotify:track:1W2919zs8SBCLTrOB1ftQT\"></iframe>",
    "scripts": []
  }
}
For a Spotify track, that is a 300 by 380 <iframe> pointing at open.spotify.com/embed, and Microlink SDK mounts it in place of the card.

Media values fall back in order

media is an array because each value after the first is a fallback. The SDK uses the first one the URL can satisfy:
import Microlink from '@microlink/react'

export default props => (
  // The card media could be:
  // - `iframe`, if the URL provider supports it.
  // - `video`, in case `iframe` hasn't been satisfied.
  // - `audio`, in case `video` and `iframe` haven't been satisfied.
  // - `image`, in case neither of the previous values have been satisfied.
  <Microlink media={['iframe', 'video', 'audio' 'image']} {...props} />
)
This covers URLs whose provider doesn’t support iframes, and URLs where you don’t know in advance whether there is an audio or video streaming source to consume. When none of the first three is satisfied, the card falls back to image.

Every oEmbed provider is supported

Any provider that implements the oEmbed specification works with media: ['iframe']. A non-exhaustive list of the most common ones:
To use native embeds in your own previews, upgrade to Microlink SDK v4.5.0 and add 'iframe' to the front of your media array.

Join the community

All of these improvements or features are community driven: We listen to your feedback and act accordingly.
Whether you are building a product, an indie developer, or just interested in web technologies, come chat with us.