Embedding a Microsoft Stream channel on a web page

Microsoft Stream is the successor of Office 365 Video, and basically an enterprise video service where people can upload, view, and share videos securely. Since last month (20th of June 2017) Microsoft Stream is GA, which means it has left the preview phase and is now fully backed and supported by Microsoft.

One of the cool features of Stream is the possibility to easily generate embed code for a video, which you can then copy/paste to a web page of your choice (SharePoint pages being an obvious choice). Microsoft explains quite well how this works in their own documentation: stream.microsoft.com/en-us/documentation/stream-portal-embed/.

For a customer I was looking for a way to embed an entire channel in a SharePoint page though. In so called Modern Sites (both Team Sites and Communication Sites), Microsoft provides a very nice Stream web part.

Although still in Preview, it works well, and you get to choose a channel instead of a single video too. Just select Channel as a Source, paste in the URL of your channel in Stream, and you are good to go.

Unfortunately, in classic SharePoint Team Sites / Pages, this web part is not available. The fact that there is a Channel option in the modern web part though, led me to believe that it should be possible to easily embed channels on classic pages too. And yes, that turns out to be fairly simple.

When you visit a channel page in Stream, the URL of that page will look like this: web.microsoftstream.com/channel/<channel ID>. Now when you add “embed” to the path in that URL, like this: web.microsoftstream.com/embed/channel/<channel ID>, you will see a nice view of your channel, without all the Stream chrome around it. And it is responsive too!

Here’s what a regular channel page looks like:

Here’s what that same page looks like through the embed URL:

And here when I resize the page:

To get this embeddable Stream page on a classic SharePoint page, add a Content Editor Web Part to the page, click “Edit Source” in the “Format Text” tab of the ribbon, and add this code (of course you need to insert your own channel ID):

The result:

That’s it!

I have also posted the idea to generate the embed code from a channel page right inside Microsoft Stream on the Microsoft Tech Community. Please upvote the idea there if you think it is interesting! In the meantime, feel free to generate your own embed code based on this blog post 🙂

10 thoughts on “Embedding a Microsoft Stream channel on a web page

  1. Juan Carlos González Martín

    Ey Maarten,
    I have beeing trying your workaround for adding a stream channel in a classic SPO page With no sucess,,,,Chrome, IE and Edge are not allowing to display the content in the iFrame because apparently they are blocking it…of course, I have verified that Stream is added in the HTML Security Field configuration in my site…am I missing something?

    Thanks!

    Reply
    1. Maarten Eekels Post author

      How are you inserting the code? If you use the Embed Code option from the ribbon, that doesn’t work. Somehow the responsive styling is not picked up and you don’t see anything. If you use the Content Editor Web Part though, the exact same code does work.

      Reply
      1. Maarten Eekels Post author

        Just tried on another tenant, works flawlessly. Tried on classic Web Part page and on a Blog page, tried both in Chrome and Edge. No issues. Sorry…

        Reply
  2. David

    The Stream Web Part makes problems in Internet Explorer and mobile devices. Often only black screen is visible. It seems to be an authentification problem. If I call the Stream Portal directly and then go back to the SharePoint page with the embedded video – then the video is displayed correctly. Who has a solution for the problem? Microsoft Support is not helpful. MS Told me, I should install Silverlight – must laugh – and what about iOS devices? haha

    Reply
    1. Maarten Eekels Post author

      Well, Silverlight is definitely not the solution…

      Unfortunately, Stream doesn’t pick up single sign-on very well yet. This is a known issue and the product team is aware.

      Reply
  3. Beans

    Thank you for this 🙂

    Sharepoint seems to create unnecessary steps when creating a front end. As a platform it’s effective for many things but I don’t enjoy their web creation process, it’s cumbersome compared to some of the other web development platforms (although in all fairness it is very robust when used correctly for documentation and collaboration)

    Reply

Leave a Reply