oEmbed

See how to use this format to embed platform's content in third party sites.

Miguel Giraldo avatar
Written by Miguel Giraldo
Updated over a week ago

oEmbed is an open format designed for embedding content from one site into another, by obtaining an HTML embed code (iFrame). From now on, the platform's Live stream, Image and embed resources allow consumers can quickly obtain this code through the implementation of oEmbed API.

It is quite simple and we will show you how to do it here.

1. First, the mediastream oEmbed path is as follows: https://mdstrm.com/oembed, in addition, you must also use the URL path of the platform content, as required by the oEmbed API, it must be encoded, so you can use online encode-decode pages to obtain it.

2. From platform, and according to the selected content, we must create the required url, as mentioned, in each available resource we must add the corresponding ID of the content:

  • Embed (Video): https://mdstrm.com/embed/{media_ID}

  • Live-stream: https://mdstrm.com/live-stream/{live-stream_ID}

  • Image: https://mdstrm.com/image/{image_ID}

3. Obtain the encode URL; as an example we take the id of a media content:

https://mdstrm.com/embed/61a54bef57d6af082df8d14f

the URL encode would be as follows:

https%3A%2F%2Fmdstrm.com%2Fembed%2F61a54bef57d6af082df8d14f

4. Once the url path is obtained, the user must send an HTTP request in the following format: https://mdstrm.com/oembed?url={Encode_URL}

Example:

https://mdstrm.com/oembed?url=https%3A%2F%2Fmdstrm.com%2Fembed%2F61a54bef57d6af082df8d14f

This path is then copied and pasted into the browser, the obtained response will come under the default JSON format or as an xml, using the example of the content embed, the response to the request would be the following:

{
"version": "1.0",
"provider_name": "Mediastream",
"provider_url": "https://www.mediastre.am",
"type": "video",
"title": "Dearborn_st_bridge_4k",
"thumbnail_url":"https://thumbs.cdn.mdstrm.com/thumbs/61362f4eea42ea0e5672fee1/thumb_61a54bef57d6af082df8d14f_61a54bef57d6af082df8d158_1s.jpg",
"thumbnail_width": 640,
"thumbnail_height": 360,
"width": 640,
"height": 360,
"html": "<iframe src='//mdstrm.com/embed/61a54bef57d6af082df8d14f' width='640' height='360' allow='autoplay; fullscreen; encrypted-media' frameborder='0' allowfullscreen allowscriptaccess='always' scrolling='no'></iframe>"
}

The data provided shows the current version of oEmbed, the name of the provider and its url, the type of the requested resource, the title, the thumbnail (it uses by default the one selected as the main one), the size of the thumbnail width and height and the corresponding HTML code for insertion.

If we embed the code in a test website, the clip plays immediately.

The JSON response is similar in all cases of available resources.

You can consult the official open oEmbed documentation at the following link: https://oembed.com/

To be considered

  1. For content with closed access (token), oEmbed will provide the JSON format, however if the insertion code is implemented in a web, it displays the Invalid Token alert; in this case and only if it is necessary to share the content, the corresponding consumption token must be added to the iframe received in the JSON from oEmbed; the same result is presented in case of encoding the platform url using the token as a query string inserted in it

  2. If the generated encode URL is not the right one, at the moment of making the HTTP request it will give Not Found as a response.


If you have any additional questions, feel free to contact us through the chat.

Atte: Mediastream team

Did this answer your question?