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.

​