Video Embed Using Highlighted 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:

• Stream (Classic)
• YouTube
• File Viewer
• Embed 
• Hero 
• Highlighted Content - This blog

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 from current site or any site in your tenant, then you can use this option. For this blog, we will use video from the current site. 

• Upload video to SharePoint Library.

• Now add Highlighted Content webpart to your page.

• Select the pencil icon to edit the web part.

• In the Source dropdown, select "A document library on this site".
• In the Document library dropdown, select the document library where your videos are stored.
• In the Document type dropdown, select Video.

• In the Filter and sort section, for the Filter dropdown select Column name.

• In the Column name dropdown, select Name (File).
• In the next dropdown, select “Equals”.
• In the Enter search value field, enter the name of video with extension. For example, in my case we will enter “Sample Video 1.mp4”.

• In Layout, select carousal.

• Close the ribbon. Update video title manually.

• Save the page.

• Video will render as below.

Advantage:

• The select option can pick video from classic libraries, like site assets.
• Video is available to any user who has access to the file. If you want to manage permission, that can be done using SharePoint’s permission management. 
• The video takes full section width.
• Video provides you expected functionality like shows thumbnail and provides play icon. On play icon click, the video starts.
• With Stream on SharePoint coming, Microsoft is promoting this option to build video gallery kind of functionality. You can read more on below link:
  Link - https://learn.microsoft.com/en-us/stream/streamnew/portals-set-of-videos

Limitations:

• We need to provide title in carousal view manually.
• There are no description or caption functionality. Although you can overcome this by adding the details below the title. The only issue is the separation of title and description is not identical as both have same font size. 

• On play button click, it will open video in stream.

Video Embed using Stream Classic webpart in SharePoint Online Modern Page

Recently our client provided us company anniversary video and ask us if we can 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 different options available and what are their advantage and limitations. Let’s see the options first:

• Stream (Classic) - This Blog
• YouTube
• File Viewer
• Embed
• Hero
• Highlighted Content

For this blog, we will see the first option - Stream (classic).

You can use this option if you are using Microsoft Stream in your organization.

• Step 1 - You can upload the video to your organization's channel or private channel. Once you added your video in Stream, copy the video URL.

• Step 2 - Then, you can add Stream (Classic) webpart on your modern page.

• Step 3 - In settings, please select a single video and provide the video URL we have copied in step 1.

• Step 4 - You can provide a caption below the video if you want.
• Step 5 - Save the page.

• Step 6 - The video will render on the page as below.

Advantage:

• The webpart provides expected functionality like showing a thumbnail of the video and the play button and on the play button click it will start the video.
• The caption is allowing multiline text.
• There is a setting available for starting the video at any specific time.
• When you play the video, you can view the statistics of the video like the number of views, number of likes, number of comments, etc.
• The videos are stored in a central area. If you want to create a video gallery kind of functionality, then this webpart will be more useful.
• Stream video is permission oriented. So, if the user doesn’t have permission, they won’t be able to see the video.
• When you add a video to the stream, you can provide custom thumbnails and transcript details.

Limitations:

• If you are adding this in a single-column section, this will not use full screen.
• Stream requires a license. So, the video is not visible to users who don’t have a stream license available. If your Intranet is shared with such users, please avoid this option.
• The stream video option is not able to showcase any metadata associated with the video. For example, if you want to see the video description, this will not be shown. There is an option to add the caption manually.

With Stream (On SharePoint) coming up, this will be deprecated in the future. The estimate is in Q1 of 2023 the retirement date will be announced and after 24 months of the retirement date, this will no longer be available.

For more information refer below link:
https://learn.microsoft.com/en-us/stream/streamnew/stream-classic-to-new-migration-overview#timeline

How to add, edit and Remove Footer links in Modern communication site

In previous blogs we learn how can we enable footer and set logo and footer text on SharePoint Online Modern Communication site. If you have not gone through that you can use below link to check that post.

• How to enable Footer in a SharePoint Modern Communication Site
• How to set footer logo and footer text in Modern communication site

In this blog, we are going to see what are the options to add links. So let's get started.

Once you enable footer, you can see footer in the bottom of the footer.

Add Footer Links:

To add footer links, follow below steps:

• Scroll to the bottom of the page.
• Click on Edit.
  Note – If you do not see this, then you do not have enough permission.

• It will open new panel in the left side of the screen.

• If you want to display links to specific group, enable Site navigation audience targeting. We will discuss about this in detail in next blog

• Click on “+” icon to add new link.
• When you click “+” icon, it will open dialog besides it. You need to fill below values:
• Choose whether you want to add link or label
• If you select link, you can provide “Address”. In this you can specify URL where user will be redirect on click.

• If you select label, address field is disabled.

• Provide Display Name. 
• Click OK.
• Repeat above steps to add more links/ label. You can total 8 links. After 8 links add button will be disabled.

• Click “Save” once all changes are done.
• Refresh page to see result if you don't see changes after save click.

Edit Footer Links:

To edit footer text, follow below steps:

• Scroll to the bottom of the page. 
• Click on Edit.
  Note – If you do not see this, then you do not have enough permission.

• It will open new panel in the left side of the screen.
• Click on “…” beside link / label. 
• It provides multiple options like
• Edit - It will provide option to edit
• Move Up - It will move current link to one step up.
• Move Down - It will move current link to one step down. 
• Remove - It will remove the link

• Click on Edit.
• It will open edit link dialog. This will be same as we explain in add link.
• Make changes and click OK.
• Click Save.
• Refresh page to see result if you don't see changes after save click

Remove Footer Links:

To remove footer text, follow below steps:

• Scroll to the bottom of the page. 
• Click on Edit.
  Note – If you do not see this, then you do not have enough permission.

• It will open new panel in the left side of the screen.
• Click on “…” beside link / label. It will provide multiple option. 
• Click on remove.

• Click Save.
• Refresh page to see result if you don't see changes after save click.

In next blog we will check out the audience targeting settings for the Footer links. 

How to set footer logo and footer text in Modern communication site

In last blog we learn how can we enable footer on SharePoint Online Modern Communication site. If you have not gone through that you can use below link to check that post.

• How to enable Footer in a SharePoint Modern Communication Site

In this blog, we are going to see what are the options to set logo and text. So let's get started.

Follow below steps to set footer logo:

• Go to Setting -> Change the look -> Footer.
  (you can find steps in detail in first blog)
• There you can see upload logo option. Click upload. Select the file from your local system. 

• Click save

• It will be displayed to footer.

To add footer text, follow below steps:

• Go to Settings -> Change the look -> Footer
• Add text in display name.

• Click Save.
• It will show in the left bottom corner.

In next blog we will see how we can set footer links. What are layout option to show the links and what are the limitation of the Modern footer.

How to enable Footer in a SharePoint Modern Communication Site

SharePoint Online introduce Modern Sites and with it introduce OOTB Footer. Generally we are not used to it but one of our customer wanted to learn more about it and asked us to prepare document on it.

We thought as it has been some time, we will get detailed blog on it easily. But it seems it is been described only in Microsoft Document. And I have put reference of it in the end of this post. It is good but it seems very less described and not updated with new updates. So I am trying to explain it in as detail as I can in this footer series. So lets get started.

First of all we need to make sure the Footer is enabled in the Modern Communication SharePoint site.

Notes -

• Footer is not available in Modern Team site as of now.  
• Footer will be enabled by default for all new communication sites after the feature is rolled out. If you can see the footer on your modern communication site, skip this steps

Follow below steps to enable the Footer:

• Click on “Settings”.
• Click on “Change the look” option.
  Note – If you are not seeing this option then you do not have enough permission on this site.

• Click on Footer

• Make sure footer is enabled. If not enable it.

• Once you enable, it will show different option. We will look in to them in next post. Click Save.

• Once your enable it , it will display in the bottom of the page.

You can enable this using PowerShell as well. For this you will need PNP Powershell installed in your system. In case you don't have PNP PowerShell Set up, check this blog.

Below is PNP PowerShell command to enable footer:

Connect-PnPOnline -Url "<SiteURL>" –Credentials (Get-Credential) 

Set-PnPFooter -Enabled:$false

Lets configure the footer in the next blog.

Reference:
https://docs.microsoft.com/en-us/sharepoint/dev/features/site-footer