Video Embed Using Hero WebPart In SharePoint Online Modern Page

Recently our client provided us company anniversary video and asked us if we could add it to SharePoint Online site and showcase the result. So, I thought about what the options available are. And I am writing this blog to showcase the options available and their advantages and limitations. Let’s see the options first:

If you want to check any previous options, you can click on that option in the above list and read more about that option.

If you want to add a video to your current site or any external site, then you can use this option. For this blog, we will use video from the SharePoint site. 

Upload video to SharePoint Library.

Video Embed using Hero webpart in SharePoint Online Modern Page

Now add Hero webpart to your page. 

Note - make sure you add a hero webpart in a single or 2 third section. 

Video Embed using Hero webpart in SharePoint Online Modern Page

Select webpart and click on edit in the top left section.

Video Embed using Hero webpart in SharePoint Online Modern Page

In the layout option select “one tile”. It will update the webpart to a single-tile layout.

Video Embed using Hero webpart in SharePoint Online Modern Page

Now click on the select link button. 

Video Embed using Hero webpart in SharePoint Online Modern Page

Select “site” in the left section. Select the library.

Select the video you want to display. Then click select at the bottom of the panel.

Video Embed using Hero webpart in SharePoint Online Modern Page

It will load the video on the page. Click edit on the bottom right part of the tile to edit the details.

Video Embed using Hero webpart in SharePoint Online Modern Page

Provide video title. It will display on video as you type. 

Video Embed using Hero webpart in SharePoint Online Modern Page

  • If you want to navigate the user to any other link, open the options section. 
  • In that, you can change the link text from “learn more” to anything you want. Also, you can provide a link where you want to redirect users. You can turn off the setting if you don’t want to display the additional link.

Save the page. 

Video Embed using Hero webpart in SharePoint Online Modern Page

The video will render as below.

Video Embed using Hero webpart in SharePoint Online Modern Page

Advantage

  • The select option can pick videos from classic libraries, like site assets. 
  • The webpart provides basic features of a thumbnail, and play button, and starts the video on play click. 
  • We have the ability to provide an additional link to redirect users to another link. 
  • With Stream (On SharePoint) coming, Microsoft is suggesting this webpart for setting up a video gallery kind of functionality. 

Reference - https://learn.microsoft.com/en-us/stream/streamnew/portals-guide-intranet-home#videos-as-curated-hero-elements

Limitations

  • The webpart has a fixed height. That might cut the thumbnail. Also, the video is not occupying the full width of the webpart.
  • We need to provide the title manually. 
  • If the source is external like a YouTube link, it will showcase a thumbnail without a play button. On click, it will open in a new tab.
  • If you want to embed a single video, you need to add the webpart in a single column or 2 third sections first and need to reset webpart to a single layout.