File Viewer as video webpart

[Nevinia210]

Hello Everyone,
Is there/will be some option to insert configured File Viewer webpart with video with some easier approach than setting property PropertiesJson?
I tried approach that is described in documentation with usage of exported json from page /_layouts/15/workbench.aspx, but i was unsuccessful.
After inserting webpart configured on page, all content on page gets removed (also webparts that were there before),
Or with identical exported json i get error:

Cannot read properties of undefined (reading 'setTransformComponent')

This is what i use for exported json:

{
  "position": {
    "zoneIndex": 1,
    "sectionIndex": 1,
    "controlIndex": 1,
    "layoutIndex": 1
  },
  "webPartData": {
    "id": "<WEBPARTID>",
    "instanceId": "<INSTANCEID>",
    "title": "File viewer",
    "description": "Display a document or file on your page including Word, Excel, PowerPoint, PDF, 3D models, videos, and more.",
    "audiences": [],
    "serverProcessedContent": {
      "htmlStrings": {},
      "searchablePlainTexts": {
        "title": "<TITLE>"
      },
      "imageSources": {},
      "links": {
        "serverRelativeUrl": "<SERVERRELATIVEURL>",
        "wopiurl": "<VIDEOURL>"
      }
    },
    "dataVersion": "1.4",
    "properties": {
      "annotation": "",
      "authorName": "<ME>",
      "chartitem": "",
      "endrange": "",
      "excelSettingsType": "",
      "file": "<VIDEOURL>",
      "listId": "<LISTID>",
      "modifiedAt": "2021-11-03T13:26:47Z",
      "photoUrl": "<PHOTOURL>",
      "rangeitem": "",
      "siteId": "<SITEID>",
      "startPage": 1,
      "startrange": "",
      "tableitem": "",
      "uniqueId": "<UNIQUEID>",
      "wdallowinteractivity": true,
      "wdhidegridlines": true,
      "wdhideheaders": true,
      "webId": "<WEBID>",
      "webAbsoluteUrl": "<WEBABSOLUTEURL>"
    }
  },
  "controlType": 3,
  "id": "<INSTANCEID>",
  "webPartId": "<WEBPARTID>",
  "emphasis": {},
  "zoneGroupMetadata": {
    "type": 0
  },
  "reservedHeight": 445,
  "reservedWidth": 744,
  "addedFromPersistedData": true
}

Thank you in advance for help

[jansenbe]

@Nevinia210 : embedding video definitely works, the approach works for any web part. We for example use this approach as part of the PnP Framework provisioning code or in Page Transformation. Here are the docs: https://pnp.github.io/pnpcore/using-the-sdk/pages-webparts.html#generic-instructions-that-apply-for-all-web-parts.

Below code snippet creates a page with an embedded video:

                // Create the page
                var page = await context.Web.NewPageAsync();

                // adding sections to the page
                page.AddSection(CanvasSectionTemplate.OneColumn, 1);

                // get the web part 'blueprint'
                var availableComponents = await page.AvailablePageComponentsAsync();
                var embedWebPartComponent = availableComponents.FirstOrDefault(p => p.Id == page.DefaultWebPartToWebPartId(DefaultWebPart.ContentEmbed));

                var image = page.NewWebPart(embedWebPartComponent);
                image.PropertiesJson = "{\"id\": \"490d7c76-1824-45b2-9de3-676421c997fa\", \"instanceId\": \"5763d557-e0e3-4bb9-bd83-bcca671c9b3a\", \"title\": \"Embed\", \"description\": \"Embed content from other sites such as Sway, YouTube, Vimeo, and more\", \"dataVersion\": \"1.2\", \"properties\": {\"embedCode\":\"<iframe width='640' height='360' src='https://www.microsoft.com/en-us/videoplayer/embed/RE4GnhX'></iframe>\",\"cachedEmbedCode\":\"<iframe width='640' height='360' src='https://www.microsoft.com/en-us/videoplayer/embed/RE4GnhX'></iframe>\",\"shouldScaleWidth\":true,\"tempState\":{},\"thumbnailUrl\":\"\",\"webPartContentUrl\":\"\",\"cachedEmbedCodeThumbnail\":\"\"}, \"serverProcessedContent\": {\"htmlStrings\":{},\"searchablePlainTexts\":{},\"imageSources\":{},\"links\":{}}, \"dynamicDataPaths\": {}, \"dynamicDataValues\": {}}";

                // add the web part to the first column of the first section
                page.AddControl(image, page.Sections[0].Columns[0]);

                // Save the page
                await page.SaveAsync("Bert.aspx");

Here's the used json, but then formatted for easier reading:

{
    "id": "490d7c76-1824-45b2-9de3-676421c997fa",
    "instanceId": "5763d557-e0e3-4bb9-bd83-bcca671c9b3a",
    "title": "Embed",
    "description": "Embed content from other sites such as Sway, YouTube, Vimeo, and more",
    "dataVersion": "1.2",
    "properties": {
        "embedCode": "<iframe width=\"640\" height=\"360\" src=\"https://www.microsoft.com/en-us/videoplayer/embed/RE4GnhX\"></iframe>",
        "cachedEmbedCode": "<iframe width=\"640\" height=\"360\" src=\"https://www.microsoft.com/en-us/videoplayer/embed/RE4GnhX\"></iframe>",
        "shouldScaleWidth": true,
        "tempState": {},
        "thumbnailUrl": "",
        "webPartContentUrl": "",
        "cachedEmbedCodeThumbnail": ""
    },
    "serverProcessedContent": {
        "htmlStrings": {},
        "searchablePlainTexts": {},
        "imageSources": {},
        "links": {}
    },
    "dynamicDataPaths": {},
    "dynamicDataValues": {}
}