Column formattingSharePoint Online

YouTube Thumbnail

This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover.

Get this format View on GitHub

Shared by João Ferreira
Updated Feb 10, 2021

Sample preview · View original animation

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank",
    "title": "View on YouTube"
  },
  "style": {
    "width": "75px",
    "height": "55px",
    "display": "=if(@currentField, 'inherit', 'none')"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://img.youtube.com/vi/' + substring(@currentField, indexOf(@currentField,'v=')+2, 100) + '/mqdefault.jpg'" 
      },
      "style": {
        "width": "75px",
        "padding": "5px"
      }
    }
  ],
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "style": {
        "padding": "15px",
        "display": "grid"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "18px",
            "margin-bottom": "10px",
            "font-weight": "700"
          },
          "txtContent": "[$Title]"
        },
        {
          "elmType": "img",
          "attributes": {
            "src": "='https://img.youtube.com/vi/' + substring(@currentField, indexOf(@currentField,'v=')+2, 100) + '/sddefault.jpg'"
          },
          "style": {
            "width": "550px",
            "padding": "8px"
          }
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "rightCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank",
    "title": "View on YouTube"
  },
  "style": {
    "width": "75px",
    "height": "55px",
    "display": "=if(@currentField, 'inherit', 'none')"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://img.youtube.com/vi/' + substring(@currentField, indexOf(@currentField,'v=')+2, 100) + '/mqdefault.jpg'" 
      },
      "style": {
        "width": "75px",
        "padding": "5px"
      }
    }
  ],
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "style": {
        "padding": "15px",
        "display": "grid"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "18px",
            "margin-bottom": "10px",
            "font-weight": "700"
          },
          "txtContent": "[$Title]"
        },
        {
          "elmType": "img",
          "attributes": {
            "src": "='https://img.youtube.com/vi/' + substring(@currentField, indexOf(@currentField,'v=')+2, 100) + '/sddefault.jpg'"
          },
          "style": {
            "width": "550px",
            "padding": "8px"
          }
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "rightCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample provides a thumbnail of a YouTube video that links to the video and a larger preview image on hover.

View requirements

This format can be applied to any text column but expects that value to be a URL to a YouTube video. The Title column is also used in the hover card.

Sample

Solution	Author(s)
generic-youtube-thumbnail.json	João Ferreira

Version history

Version	Date	Comments
1.0	February 10, 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.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

File Preview Callout with the embed Action

People Name Avatar Card

Yearly Gantt Chart