Summary 

When content authors add Microsoft Stream videos to a SharePoint Hero web part, users can now view the video inline within the web part.

How to Add Microsoft Stream Videos to SharePoint Hero Web Part

Beginning in December 2022, Microsoft began rolling out an update to the Hero web part. When content authors add Microsoft Stream video to a SharePoint Hero web part, users can now view the video inline within the web part. When users click to play a video in the Hero web part section of a SharePoint site, the video will play inline. This feature allows users to watch a video without being taken off the SharePoint page and allows users to browse or scroll through the other contents of the page while the video plays. 

It is important to note that this functionality only works for videos in Microsoft Stream on SharePoint. Stream Classic videos will open in the Stream Classic web app. 

In the example below, I have a Hero web part deployed with two Microsoft Stream videos along with other content. The user is given clues such as a play button and a duration stamp which convey that the content they are seeing is a video.  

When the user clicks the play button, the entire Hero web part is now the stage that displays the video. Not only does the video play, but the user has access to many of the controls you would expect to see if they were accessing the video from the Stream web app. 

Video transcripts are also available if a video was recorded with transcription turned on. Notice the example above is missing the transcript option in the upper right section of the video. In the example below, the Teams meeting was recorded with transcription turned on. In this case, you can view the transcript along with the video.   

There is some trade-off regarding viewing the transcript in this small footprint. As you can see in this example, the video is shrunk to accommodate. However, you still have the ability to search for keywords in the transcript and jump to that section of the video by clicking on the block of text. 

What do you have to do?

This functionality is being rolled out to all tenants.  Taking advantage of this is simple. First, open Microsoft Stream and find a video you would like to include in your Hero web part.   

With the link copied, edit your page with a Hero web part. You will be prompted to choose a location for your Hero component. Choose “From a link”, paste the link you just copied into the text box, and click the “Add” button. 

In some cases, you need to tweak the automatically created Hero tile. In this case, SharePoint auto-generated a very bland tile.  

Thankfully, we can customize the tile with a few clicks. With the page in edit mode, click on the tile we just created to display the edit controls for that specific tile. Click on the pencil icon for that tile (not for the overall Hero web part, but the one in the lower right-hand corner). 

Now you can add your own title, background image, alt text, or call-to-action link. 

In my example, I added a stock image, a new title, and a link to learn more about our monthly forum. 

Before	After

Reference: Microsoft 365 Roadmap item 93351 | Microsoft 365