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