Any plans to support elmType video

Question

Are there any plans to support embedding videos using JSON formatting? It would be great to add elmType video so we can embed videos. This would be great for card/tile layout similar to the highlighted content web part.

Answer

Hi @exwhyz , welcome to Q&A forum!

If the requirement is to allow users to click to jump to the video, is it acceptable to try to use the hyperlink column?

Here is the blog about how to use Hyperlink columns:
How to use a Hyperlink column on a Custom List to organize links to SharePoint sites
Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

===========
Update1======================
You could create a Hyperlink and try this code:

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "a",  
  "attributes": {  
    "href": "@currentField",  
    "target": "_blank"  
  },  
  "style": {  
    "width": "75px",  
    "height": "55px"  
  },  
  "children": [  
    {  
      "elmType": "img",  
      "attributes": {  
        "src": {  
          "operator": "+",  
          "operands": [  
            "https://img.youtube.com/vi/",  
            "=substring(@currentField, 32, 44)",  
            "/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": {  
              "operator": "+",  
              "operands": [  
                "https://img.youtube.com/vi/",  
                "=substring(@currentField, 32, 44)",  
                "/sddefault.jpg"  
              ]  
            }  
          },  
          "style": {  
            "width": "550px",  
            "padding": "5px"  
          }  
        }  
      ]  
    },  
    "openOnEvent": "hover",  
    "directionalHint": "rightCenter",  
    "isBeakVisible": true,  
    "beakStyle": {  
      "backgroundColor": "white"  
    }  
  }  
}

Test result:

Reference:
https://lists.handsontek.net/transform-hyperlink-columns-clickable-video-thumbnails/
Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Any plans to support elmType video

1 answer