SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Video Embed Codes

If you upload video files to a SharePoint document library, there currently isn't a way for an end user to easily get the iFrame embed code for the video file other than using the Microsoft Graph Preview item API. This document library view formatting example composes the iFrame embed code automatically for any video files in the library so users could easily copy and paste it.

Get this format View on GitHub

Shared by Marc Mroz
Updated Mar 22, 2021

Video Embed Codes formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "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;\"><iframe width=640 height=360 src=\"'+ @currentWeb + '/_layouts/15/embed.aspx?uniqueID=' + [$UniqueId] + '\" allowfullscreen style=\"border:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%;\"></iframe></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",
        "style": {
          "flex": "0 0 173px",
          "display": "flex",
          "align-items": "center",
          "padding-right": "8px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "@thumbnail.200x100"
            },
            "style": {
              "float": "right"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionget-video-file-embed-code.json

From the contributor

How to use this sample

Summary

If you upload video files to a SharePoint document library, there currently isn't a way for an end user to easily get the iFrame embed code for the video file other than using the Microsoft Graph Preview item API. This document library view formatting example composes the iFrame embed code automatically for any video files in the library so users could easily copy and paste it.

For each video file in the library it will display the embed code for the file as follows:

<div style="max-width: 640px"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><iframe width=640 height=360 src="https://companyname.sharepoint.com/sites/sitename/_layouts/15/embed.aspx?uniqueID={84D85550-F896-3FFA-8881-81D5257B60A8}" allowfullscreen style="border:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%;"></iframe></div></div>

screenshot of the sample

View requirements

This view will only output iFrame embed codes for video files with common known extensions.

Sample

Solution Author(s)
get-video-file-embed-code.json Marc Mroz

Version history

Version Date Comments
1.0 March 22, 2021 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.