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:

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

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.

• Now add Hero webpart to your page.
  Note – make sure you add a hero webpart in a single or 2 third section. 

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

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

• Now click on the select link button. 

• 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.

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

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

• 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. 

• The video will render as below.

 

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. 

Video Embed using Embed 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 - This blog
• Hero
• Highlighted Content

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

  You can use this webpart to embed your video without having issues with the source. It provides you the option to embed iframe which allows you to embed any kind of video. 

 

• Step 1. For this blog, I will use the SharePoint Library video and we will use the iframe option to view the video on the Embed webpart. To start the process, upload videos in the SharePoint library. 
  
  Note - If you want to embed any other source video just add the source path below and jump to step 7.
  

   <iframe src=" " width="640" height="360" frameborder="0" scrolling="no" allowfullscreen></iframe>  
  

• Step 2. Once added, click on the file. It will open in the preview. 

 

• Step 3. Click on three dots (…). In that click on Embed.

 

• Step 4. This will open the embed panel. 
  
  
  
  
  

 

• Step 5. You can change the below configuration as per your requirements:
  • Start time – you can select the start time for your video to pay
  • Player size – there are multiple sizes available for your embed option – 560 x 315, 640 x 360, 853 x 480, 1280 x 720. 
  • Autoplay – select if you want to start your video automatically.
  • Responsive – this will generate responsive code for the embed. This will use the player size you have selected for responsiveness. 
  • Show title – Enable this to show your video title on the video.

 

• Step 6.    Once we select the correct settings, click on the “Copy embed code” button and it will copy the embed code. 
  
  
  
  
  

 

• Step 7.    Now go to your modern page and add Embed webpart.
  
  
  
  
  
  
  
  

 

• Step 8.    It will open the embed panel automatically. If not, click on “Add embed code” to open the embed panel.
  

 

• Step 9.    In the embed code box, provide the video iframe we copied earlier.

 

• Step 10. Provide a caption for the video if you want. 

 

• Step 11. Save the page. 

 

• Step 12. The video will render as below.

 

Advantage:

• You can have video public or private. Video is available to all users if it is from any video streaming source like YouTube, or Dailymotion. If you are embedding from Office sources, you can implement permissions as well. 
• The video takes full section width.
• Video provides you with expected functionality like showing thumbnails and providing a play icon. When you click a play icon the video starts.
• You can provide a multiline caption below the video. 

Limitations:

• There are no additional details you can showcase with the video.
• We have seen this issue sometime that even though we disabled autostart, the video autostarts on the page load.
• On page load, instead of the play icon, you may see the embed icon. When you hover over the video, it disappears and when you move your cursor out of the video, you will see the play icon. This behavior generally happens if you embed the video from an external source like youtube.

​

Video Embed using File Viewer 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 - This blog
• Embed
• Hero
• Highlighted Content

If you want to check any previous options, you can click on that option in the above list and read more about that option. Let's see how we can use the File Viewer webpart in detail:

This is the new alternative for Stream (Classic). With that going out of the picture you need to store the videos in your OneDrive, SharePoint, or Yammer.  Once you move your video to one of those places, then you can use this option for embedding a single video on your modern page. 

• For this blog, we will add the video to the documents library. 

 

• Now add the File Viewer webpart to your page.

• It will open the file select panel. If it doesn’t open, click add file in webpart.

 

• In the open panel, click on site. Select the library.

• Select the video file. Then click select. This will load the video on the page.

• Provide a caption/ description for the video if you want.

• Save the page. 

• The video will render as below.

Advantage:

• No need to copy the video link. You can select the video directly. 
• 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 with expected functionality like showing thumbnails and providing a play icon. On the play icon click, and the video starts.
• Caption/ description allows multiple lines of text content. 

Limitations:

• The file select option is not showing classic libraries like site assets to select a video. So, avoid creating such a library to manage videos.
• We can’t display any additional metadata associated with the video even though now we are using SharePoint as storage. 

Video Embed using YouTube 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 - This blog
• File Viewer
• Embed
• Hero
• Highlighted Content

Let's see how we can use the YouTube webpart in detail:

YouTube is an open source for most companies for sharing content. If the video can be shared publicly, you can use this option.

• Step 1 - Once you upload & publish the video to YouTube, copy the video URL.

• Step 2 - Now add the YouTube webpart to the modern page.

• Step 3 - In settings, provide the video URL.

• Step 4 - Once the video is loaded, the remaining options will be enabled. You can set the start time, set if you want to show controls, etc.

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

• Step 6 - Save the page.

• Step 7 - The video will render as below:

Advantage:

• Video is available to all users.
• The video takes full section width.
• Video provides
  you with expected functionality like showing thumbnails and providing a play icon. On the play icon click, and the video starts.
• You can provide multiline captions below the video.
• When you add a video to the YouTube Channel, you can provide custom thumbnails and subtitle details.

Limitations:

• If the video is private, this option might not be available for you. Also, there is no permission control for this webpart.
• YouTube owns all rights to the source. For any reason, there is conflict, YouTube can block your video, and this might break the webpart.
• There are no additional details you can showcase with the video. For example, like or comment count. 

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