SOLVED

Microsoft Stream and oEmbed

Copper Contributor

Hello, 

 

We're trying to use use oEmbed in a WordPress blog to share videos which have been uploaded to Microsoft Stream (Office 365).

 

I've been looking at the guide: https://docs.microsoft.com/en-us/stream/embed-video-oembed . Although videos on Youtube (for example) embed the respective videos effectively, the videos from Microsoft Stream do not.

 

Instead of adding the video to the blog, the link to the Stream video just appears as a regular link and no video appears. 

 

Is there an additional step that we need to go through with Stream to make this work?

 

Thank you in advance!

Emily

7 Replies
best response confirmed by Emily_Gloscol (Copper Contributor)
Solution

Our oEmbed endpoint allows you to programmatically switch a regular stream link into it's iFrame/embed equivalent. There would need to be code written that detects when you paste the stream link into wordpress, that it crafts the right call to oEmbed and then gets the iframe out of the response and puts it into the blog post instead of the link.

 

Did you write some plugin/code or do configuration on Wordpress to call our oEmbed endpoint? 

From a quick search it looks like Wordpress supports a bunch of oEmbed endpoints by default (like YouTube and other public/consumer products), but depending on if you host your own WP or not you might be able to add URLs to whitelist, but not sure if this works with Stream or not, you'd have to play with it.

 

https://codex.wordpress.org/Embeds

 Thank you for your reply Marc.

 

Unfortunately we don't host our own WordPress blog so we won't be able to add any plug-ins.

 

Thank you anyway!

@Marc Mroz 

 

I know this is old, but I am having the same issue. I am trying to create a Stream Embed Block plugin. It seems to be working except for the fact that the block just displays the Stream URL and not the iframe embed code. As I understand things, I should be able to have wp_oembed_add_provider( '#https://*.microsoftstream.com/video/.*#i', 'https://web.microsoftstream.com/oembed', true ); in my plugin to add Stream as a new embed provider. WordPress is matching the pattern but it seems it is not getting a response from the Stream embed?

I have been looking for a way to add the same feature to my wordpress blog ( https://www.topgospelsongs.com.ng ) please let me know if you got a solution to that :folded_hands::folded_hands::folded_hands:

@Marc Mroz 

 

I have a plugin that is working. However, Stream is not showing the video. The plugin works as I described in my last comment. It makes a request to the oEmbed endpoint when a proper Stream URL is recognized. The MS Stream oEmbed returns properly formatted JSON and WordPress converts that JSON to properly formatted HTML and embeds that in the post. Here is what is the JSON returned and the HTML embedded in the post

{
"type":"video",
"version":"1.0",
"title":"",
"provider_name":"Microsoft Stream",
"provider_url":"https://stream.microsoft.com",
"embed_url":"https://web.microsoftstream.com/embed/video/3e4b67a0-de91-482f-84ca-78b2196c1810?autoplay=false\u0026showinfo=true",
"html":"\u003ciframe width=\"640\" height=\"360\" src=\"https://web.microsoftstream.com/embed/video/3e4b67a0-de91-482f-84ca-78b2196c1810?autoplay=false\u0026showinfo=true\" style=\"border:none;\" allowfullscreen\u003e\u003c/iframe\u003e",
"width":640,
"height":360,
"thumbnail_url":"https://amsglob0cdnstream13.azureedge.net/streamlogo/Light_640x360.jpg"
}
<div style='max-width: 640px'>
<div style='position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;'>
<iframe loading="lazy" width="640" height="360" src="https://web.microsoftstream.com/video/3e4b67a0-de91-482f-84ca-78b2196c1810?autoplay=false&#038;showi..." allowfullscreen style="border:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%...">
</iframe>
</div> </div>

 Attached is what is displayed on the site in Firefox and Chrome. Basically Stream is refusing the connection. I am authenticated to my corporate MS account and can view the video if I go to Stream.

In looking at this. I think there is a bug with WordPress. Stream oEmbed returned the correct src URL with /embed/ in it but the HTML generated by WordPress from the JSON is stipping the /embed/ and that is causing the issue, I believe. Will try to see if I can report it as a bug with WordPress.

@jbreitenbucher Any update on this? 

1 best response

Accepted Solutions
best response confirmed by Emily_Gloscol (Copper Contributor)
Solution

Our oEmbed endpoint allows you to programmatically switch a regular stream link into it's iFrame/embed equivalent. There would need to be code written that detects when you paste the stream link into wordpress, that it crafts the right call to oEmbed and then gets the iframe out of the response and puts it into the blog post instead of the link.

 

Did you write some plugin/code or do configuration on Wordpress to call our oEmbed endpoint? 

From a quick search it looks like Wordpress supports a bunch of oEmbed endpoints by default (like YouTube and other public/consumer products), but depending on if you host your own WP or not you might be able to add URLs to whitelist, but not sure if this works with Stream or not, you'd have to play with it.

 

https://codex.wordpress.org/Embeds

View solution in original post