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):
<div style='position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;'><iframe src="https://web.microsoftstream.com/embed/channel/<channel ID>" allowfullscreen style='position: absolute; top: 0; left: 0; height: 100%; width: 100%;'></iframe></div>
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 🙂