HomeBlogTutorialsShow Articles

Show Oembed

Suggest Edits

WHAT IS OEMBED?

oEmbed is basically a format that allows you to embed content on third-party websites. This simple API will allow the website to show embedded content, in our case videos, just by using the URL of the videos. In short, SHOW uses oEMBED to get embed codes for videos with their URLs.

SHOW OEMBED ENDPOINT

The SHOW's oEmbed endpoint is: https://api.getshow.io/oembed. Our oEmbed endpoint can recognize two URL formats:

URL TYPEEXAMPLE URL
iFrame Embed Code URLhttps://app.getshow.io/iframe/media/lXDHtnUB7JPQkYPcOL-Y
Share Media URLhttps://app.getshow.io/share/lXDHtnUB7JPQkYPcOL-Y

REGEX

Regex is the regular expression that can be used to detect SHOW URLs and to run them against our endpoints. We would recommend that you use the following Regex:

/https?:\/\/[^.]+\.(getshow\.io)\/(iframe|share)\/.*/

If this is a bit confusing, then you can use the following:

http(s)://*.getshow.io/iframe/* Valid
http(s)://*.getshow.io/share/*  Valid
http(s)://*.getshow.io/*				Valid
http(s)://*.com/share/*					Invalid
*://app.getshow.io/share/*			Invalid

We have taken into consideration any future URL updates that we will be adding. Keeping this in mind, we have also provided an option where you can be flexible as well as be updated with future URLs. This is why we have come up with a more general Regex, as shown below,

/https?:\/\/(^.)+\.(getshow\.io)\/.*/

EXAMPLE WITH CODE

In this example, we’ll request an API embed code type, with the javascript handle oEmbedVideo:

First, the media URL we’ll request:

In this example, we need to request the Embed code. For this the first thing to do is to request for the media URL,

https://app.getshow.io/iframe/media/lXDHtnUB7JPQkYPcOL-Y

The next step is to get the oEmbed endpoint.

Case #1: in JSON
The JSON format would be this,

curl "https://api.getshow.io/oembed?url=https://app.getshow.io/iframe/media/lXDHtnUB7JPQkYPcOL-Y"

This will return:

{
	"version":"1.0",
	"type":"video",
	"provider_name":"Show by Animaker",
	"provider_url":"https://www.getshow.io/",
	"width":425,
	"height":344,
	"thumbnail_width":480,
	"thumbnail_height":360,
"thumbnail_url":"https://fast.animaker.com/p/u/sbfulxapzh/thumbs/09272dkNtMleIG7iMKsvm.0000000.jpg",
	"title":"Animaker 2.0",
	"author_name":"Show by Animaker",
	"author_url":"https://www.getshow.io/",
"html":"<iframe width=\"800\" height=\"450\" src=\"https://app.getshow.coiom/iframe/media/lXDHtnUB7JPQkYPcOL-Y\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"

}

Case #2: In XML
If you’re looking for XML instead of JSON, then you need to use this:

https://api.getshow.io/oembed.xml

The endpoint would be,

https://api.getshow.io/oembed.xml?url=https://app.getshow.io/iframe/media/lXDHtnUB7JPQkYPcOL-Y

And the response would be,

<oembed>
<version>1.0</version>
<type>video</type>
<provider_name>Show by Animaker</provider_name>
<provider_url>https://www.getshow.io</provider_url>
<width>425</width>
<height>344</height>
<thumbnail_width>480</thumbnail_width>
<thumbnail_height>360</thumbnail_height>
<thumbnail_url>https://fast.animaker.com/p/u/sbfulxapzh/thumbs/09272dkNtMleIG7iMKsvm.0000000.jpg</thumbnail_url>
<title>Animaker 2.0</title>
<author_name>Show by Animaker</author_name>
<author_url>https://www.getshow.io/</author_url>
<html><iframe width="800" height="450" src="https://app.getshow.io/iframe/media/lXDHtnUB7JPQkYPcOL-Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>
</oembed>

DISCOVERING OEMBED URL

The oEMBED providers have the option to add the '' element to help make their oEMBED discoverable. Under normal circumstances, the '' section of a video's page on Show includes two ' elements: one with type m,application/json+oembed, and the other with type text/xml+oembed. You can see them below.

<link rel="alternate" href="https://api.getshow.io/oembed.json?url=https%3A%2F%app.getshow.io%2Fshare%2F{id}" type="application/json+oembed" title="{video_title}">
<link rel="alternate" href="https://api.getshow.io/oembed.xml?url=https%3A%2F%app.getshow.io%2Fshare/%2F{id}" type="text/xml+oembed" title="{video_title}">

You can see in both these links, the href attribute contains the URL for obtaining the oEmbed response in either JSON or XML format, depending on which one you use. These elements enable you to copy your video's URL and use it anywhere that oEmbed is supported.

HOW TO USE THUMBNAIL?

There is a way to work with a thumbnail. What you need to know is part of the JSON that is returned is the Thumbnail_url. This URL is the direct link to your Thumbnail image asset without the Play Button overlaid on it.

You can use this thumbnail image for cases like building your own 'popover embeds or to display your customized play button, etc.

NOT USING SHOW OEMBED

If you are not planning to use our oEmbed, no problem! You can always opt for any other oEmbed providers. We would recommend you to try Embedly. They do have a large collection of oEmbed providers as well as ready-made libraries.

Updated about 2 years ago