Teams Real Simple with Pictures: Let’s Embed Stream videos in Teams – and get Embed Codes from both SharePoint and OneDrive

Written: 12/06/2022 | Updated: N/A

The feedback about the Stream-Teams blogs has been real positive the last few weeks. And that’s all good. Feels like I’m almost back in the flow of the blog writing when I was pre-covid. So let’s hold fast to the tack this week and talk about embedding Stream videos. Video embedding involves getting a snippet of code or script, known as an “embed code” – typically from the video and then adding that snippet of code to a site, such as a SharePoint Site. Embedding helps us to surface videos where we want them to be consumed. Now, generating embed codes for videos via the new Stream on SharePoint is not completely straightforward today. It has been confirmed – in writing – as being in development so a button will be there in the future on videos to easily generate the embed code. Yet how can we do it today if we really needed to do that? And not only videos that will be housed within SharePoint, but for videos that will be housed within OneDrive too. This blog builds on the excellent work of Marc Mroz, one of the leads in the Stream Team who wrote some excellent JSON in order to obtain and surface it for videos housed in SharePoint.

Let’s go

This blog will cover

  • Getting the Embed Code for videos in SharePoint
  • Getting the Embed Code for videos in OneDrive
  • Using the embed code within Teams

NOTE: This blog will have abridged steps and will assume some familiarity with Microsoft 365 and the Teams, SharePoint and Stream services

Prerequisites

  • Teams, SharePoint and Stream Licence (Within Microsoft 365 Licence) for testing
  • SharePoint Site Owner Permissions
  • Administrative Permissions for using the Graph Explorer

GETTING THE EMBED CODE FOR VIDEOS IN SHAREPOINT

1.) Here I am within the Playlists SharePoint Communication Site which I used for the last blog covering Playlists in Teams and getting lists into a Personal App. I want to generate embed codes for these videos. Currently, there is no way in the GUI to do that.

2.) Copy the JSON below which was created by Marc Mroz in Github. Marc is one of the go to guys on the Stream Team and straight up the real deal.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "debugMode": true,
  "hideSelection": true,
  "hideColumnHeader": false,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "box-sizing": "border-box",
      "width": "100%",
      "border-width": "1px",
      "border-style": "solid",
      "padding": "0 0 0 20px",
      "margin-bottom": "10px",
      "align-items": "stretch"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "display": "flex",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "1 0 300px",
              "box-sizing": "border-box",
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "button",
                "attributes": {
                  "class": "ms-fontSize-m"
                },
                "style": {
                  "border": "0",
                  "padding": "0px",
                  "color": "#0077ff",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "txtContent": "[$FileLeafRef]",
                "customRowAction": {
                  "action": "defaultClick"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-s"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "8px"
                },
                "txtContent": "='Modified by ' + [$Editor.title] + ', ' + toLocaleString([$Modified])"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-s"
                },
                "txtContent": "=if([$File_x0020_Type] == 'mp4' || [$File_x0020_Type] == 'mov' || [$File_x0020_Type] == 'wmv' || [$File_x0020_Type] == 'avi' || [$File_x0020_Type] == 'mpg'|| [$File_x0020_Type] == 'mpeg' || [$File_x0020_Type] == 'mkv','Embed code: <div style=\"max-width: 640px\"><div style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;\">http://'+</div></div>','')"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "0 0 170px",
              "display": "flex",
              "flex-direction": "column"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "txtContent": "Edit Properties",
                "attributes": {
                  "class": "sp-row-button ms-bgColor-neutralLighter ms-fontWeight-semibold"
                },
                "style": {
                  "width": "145px",
                  "height": "32px",
                  "margin": "20px 0 10px 0"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {},
        "style": {
          "flex": "0 0 173px",
          "display": "flex",
          "align-items": "center",
          "padding-right": "8px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "@thumbnail.200x100"
            },
            "style": {
              "float": "right"
            }
          }
        ]
      }
    ]
  }
}

3.) In the SharePoint Site, on the document library select All Views and then Create New View

4.) Give the new view a name (Here titled Embed View), set the view as a List and optionally tick whether to make the view a public view. Select Create

5.) You’ll be in the view you just created (Here Embed View). Select All Views again and then select Format Current View

6.) Select Advanced Mode at the bottom

7.) Copy in the JSON above and select Save

8.) All the videos in the document library now have Embed codes which you can pull and use from this view. Took all of 2 minutes with the JSON and creating the view.

GETTING THE EMBED CODE FOR VIDEOS IN ONEDRIVE

We got the embed codes for the Stream videos held within SharePoint. However Stream videos aren’t just held within SharePoint. Teams Meetings Recordings (TMR’s), for example, are stored within OneDrive. So how can we get the embed codes for them given that we can’t just go in and format a view in OneDrive

Hands up – this is a little dirty – and you probably do need to be technically orientated to do this. But it works having tested it out.

1.) In OneDrive for Business select Cog and then select OneDrive Settings

2.) Select More Settings

3.) Select Return to the Old Site Settings

4.) Select Site Libraries and Lists

5.) Select Customise Documents

6.) Select Create Column

7.) Add a column called Embed Code, select Multiple Lines of Text and then Ok. Note: It’s also advised to select the unlimited lines box within the page, otherwise you may hit the character limit later on.

8.) In OneDrive, the Embed Code Column is now created

9.) Now it’s time to get the Embed Code itself for a video stored in OneDrive. The video to be used here is called Partner Security Briefing (Apr 22) and its an MP4 file

10.) The basis for the embed code – to be consistent with the one generated for SharePoint, can be ripped straight from Marc’s JSON – however – the code above generates the Embed Code based off of the SharePoint Site it’s added to – not OneDrive. In short, its the information in <> – the OneDrive Site and the Unique ID of the video that we need to obtain

<div style="max-width: 640px"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">http://OneDrive%20Site/embed.aspx?uniqueID=UniqueID</div></div>>

11.) We can get the OneDrive URL easily enough from the browser by just playing the video

The embed code therefore becomes

<div style="max-width: 640px"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">https://m365x843980-my.sharepoint.com/personal/chrish_m365x843980_onmicrosoft_com/_layouts/15/embed.aspx?uniqueID=UniqueID</div></div>

12.) This leaves the UniqueID of the video. But how can we get that? After many hours of trying different ways I discovered that you can get this Unique ID via the graph explorer

Run the following search query and set the query string as “.mp4”. Remember to set the query as a POST query and the URL as https://graph.microsoft.com/beta/search/query

POST /search/query
Content-Type: application/json

{
  "requests": [
    {
      "entityTypes": [
        "driveItem"
      ],
      "query": {
        "queryString": ".mp4"
      }
    }
  ]
}

13. Get the UniqueID from the response which is listed as listItemUniqueId under the name of the file

In this example its CC827941-533B-47EB-A204-2032632E5480

14.) We can now set our Embed code with the Unique ID of the video as follows

<div style="max-width: 640px"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">https://m365x843980-my.sharepoint.com/personal/chrish_m365x843980_onmicrosoft_com/_layouts/15/embed.aspx?uniqueID=CC827941-533B-47EB-A204-2032632E5480</div></div>

We can test that the embedding will work simply by putting the SRC= URL value into a browser and seeing if it directs to the video

Which in this case it does. Awesome. This embed code is going to work

We can now add that to the details in OneDrive for safe keeping

USING THE EMBED CODE WITHIN TEAMS

Now that we know how to get the embed codes, it’s just a case of using them

For example, we can surface the videos on a SharePoint Page locked into Teams, which is shown here using one embed code from SharePoint and another from OneDrive and then leveraging the embed web part within the site. Note to surface the embedded item in OneDrive on the SharePoint site you will need to adjust the HTML field security of the SharePoint Site

Job done for this week. Have a good one I look forward to seeing you all soon.