question

exwhyz-4984 avatar image
0 Votes"
exwhyz-4984 asked ElsieLu-MSFT commented

Any plans to support elmType video

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.

office-sharepoint-online
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ElsieLu-MSFT avatar image
0 Votes"
ElsieLu-MSFT answered ElsieLu-MSFT commented

Hi @exwhyz-4984 , 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.


6.gif (2.6 MiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

That is not the requirement. Hyperlinks are a very disconnected experience - not seamless at all. The requirement is to ‘embed’ and that is why I also gave the reference to the highlighted content web part.

Another example is the Microsoft Streams web part where the video is embedded on the card/tile view and can be played in place or enlarged without opening additional windows, tabs etc.

I know about the hyperlink, and that is basic point and click stuff you cross before exploring JSON formatting but that will not meet the requirement. A potential option if not JSON would be a ‘video’ column type just like the ‘image’ column type but please no hyperlinks.

0 Votes 0 ·

Hi @exwhyz-4984 ,

Thanks for the reply. Per my research, there is currently no such information related to this requirement. As a workaround, you could try to use hyperlink column. I have updated my answer, please check the update1 section.

0 Votes 0 ·

Hi @exwhyz-4984 , have you tried the workaround? Any updates are welcomed.

0 Votes 0 ·