SharePoint Online List JSON View Formatting - Video Thumbnail

Introduction

In this article, we will explore how to customize the YouTube Video Thumbnail along with their details in tile view within a SharePoint list.

Without Formatting

With Formatting

Below are the steps to implement this.

Create a SharePoint list with 3 columns.

Type	Internal Name	Required
Single line of text	Title	Yes
Hyperlink or Picture	URL	Yes
Multiple lines of text	Description	Yes

Access the Json Editor interface to format using the following steps.

Below is the JSON code to format.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "height": "300",
  "width": "300",
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "min-width": "150px",
      "flex-grow": "1",
      "justify-content": "space-around",
      "padding": "8px",
      "text-align": "center",
      "color": "#333333"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "95%",
          "height": "100%",
          "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
          "textalign": "centre",
          "overflow": "hidden",
          "border-radius": "2px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighterAlt"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "inline-block",
              "min-width": "200px"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "='https://img.youtube.com/vi/' + substring([$URL], indexOf([$URL],'v=')+2, 100) + '/mqdefault.jpg'"
                },
                "style": {
                  "width": "100%",
                  "height": "200px"
                },
                "children": [
                  {
                    "elmType": "a",
                    "txtContent": "[$Title]",
                    "attributes": {
                      "target": "_blank",
                      "href": "[$URL]"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Conclusion

Enhancing the presentation of video thumbnails in SharePoint lists not only improves the visual appeal but also enhances user experience by providing additional details. By following the steps outlined in this article, users can easily customize the tile view to display video thumbnails with relevant information, thereby optimizing content organization and accessibility.

Enjoy Learning!