Any plans to support elmType video

exwhyz 1 Reputation point
2021-10-09T23:44:32.96+00:00

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.

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,212 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Elsie Lu_MSFT 9,791 Reputation points
    2021-10-11T09:02:02.833+00:00

    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:
    141200-6.gif

    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.