Displaying embedded content using the embed action

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "=if(@currentField,'','none')", "margin-left": "8px", "margin-right": "8px" }, "attributes": { "class": "ms-fontColor-themePrimary" }, "children": [ { "elmType": "span", "txtContent": "@currentField.desc", "style": { "cursor": "pointer", "text-decoration": "underline" }, "attributes": { "class": "ms-fontColor-themeDarker--hover ms-fontSize-s", "title": "Click to open callout with embedded content." }, "customRowAction": { "action": "embed", "actionInput": { "src": "@currentField", "height": "360", "width": "640" } } }, { "elmType": "span", "style": { "padding-left": "3px" }, "attributes": { "iconName": "ActionCenter", "class": "ms-fontSize-mi" } } ] } ] }

From the contributor

How to use this sample

Summary

This sample demonstrates displaying embedded content using the embed action.

screenshot of the sample

[!NOTE]

This sample and the embed action are only available in the newer version of the Microsoft Lists App.

Prerequisites

Allowing Embedding in HTML Field Security Settings

To embed content, the target site must be allowed for embedding. For guidance on how to allow embedding, please refer to Allow or restrict the ability to embed content on SharePoint Lists using custom formatters.

If you try to embed a site that is not allowed to be embedded, the following error screen will appear:

screenshot of the error screen when target site is not allowed to embed

Obtaining and Setting the Embedding URL

The URL in the hyperlink column must be set to an embedding URL. This URL is usually found in the src attribute of the iframe element.

For example, the embedding URL for YouTube can be obtained as follows:

Open the desired video on YouTube
Select the Share button
Select the Embed button
Copy the URL from the src attribute in the embed code

If the URL is not an embedding URL, the following error screen may appear:

screenshot of the error screen if the URL is not an embedding URL

View requirements

This format can be applied to a Hyperlink column.

Sample

Solution	Author(s)
hyperlink-embed.json	Tetsuya Kawahara

Version history

Version	Date	Comments
1.0	August 27, 2024	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.

Additional notes

The embed action is described in Formatting syntax reference - customRowAction

Get this format