Create embed iframe

Hi Marco thx. Seems it works fine now

Hi @Aleksandr Chilikin,

It's not possible to set data.html in the request. This field is returned in the response as read-only.

The embed item is rendered on the board inside an iframe.

Below you can find examples of payload body, cURL request and corresponding response.

• In the request, replace the <BOARD-ID> and <ACCESS-TOKEN> placeholders with actual, valid values for board ID and app access token.
• The app the access token refers to must be running when you send the request.
• If the embed has fixed aspect ratio, you can pass either width,  or height, but not both at the same time.
  The missing dimension in the request is calculated automatically to keep the aspect ratio of the embed.
• The payload example below includes all the fields you can pass, except from height.
• In the payload body, data.url is the only required field.

Payload body example

{
  "data": {
    "url": "https://www.youtube.com/watch?v=ifDJgNlg3sc",
    "mode": "modal",
    "previewUrl": "https://images.rawpixel.com/image_1300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm0zOTEtYmxvZ2Jhbm5lci0wMS5qcGc.jpg"
  },
  "position": {
    "x": 3500,
    "y": -400,
    "origin": "center"
  },
  "geometry": {
    "width": 800
  }
}

CURL request

curl --request POST \
     --url https://api.miro.com/v2/boards/<BOARD-ID>/embeds \
     --header 'Accept: application/json' \
     --header 'Authorization: Bearer <ACCESS-TOKEN>' \
     --header 'Content-Type: application/json' \
     --data '
{
     "data": {
          "url": "https://www.youtube.com/watch?v=ifDJgNlg3sc",
          "mode": "modal",
          "previewUrl": "https://images.rawpixel.com/image_1300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm0zOTEtYmxvZ2Jhbm5lci0wMS5qcGc.jpg"
     },
     "position": {
          "origin": "center",
          "x": 3700,
          "y": -300
     },
     "geometry": {
          "width": 800
     }
}'

JSON response

In the response, data.mode and data.url are set as per corresponding REST API request.
All other data.* fields in the response data object are fetched from the resource provider (in this case: YouTube), and are read-only.

{
  "id": "3458764532406641234",
  "type": "embed",
  "links": {
    "self": "https://api.miro.com/v2/boards/<BOARD-ID>/embeds/3458764532406641234"
  },
  "createdAt": "2022-09-01T13:28:47Z",
  "createdBy": {
    "id": "3074457356556534321",
    "type": "user"
  },
  "data": {
    "contentType": "video",
    "description": "Faster Hands &amp; Feet (in 10 days) ► https://www.Drumeo.com/faster/ The Ultimate Drumming Toolbox ►https://www.drumeo.com/ultimate-toolbox/ What&#39;s better than one awesome drummer? Two awesome drummers! Check out this drum duet featuring Senri Kawaguchi and Sarah Thawer playing the funky track &#34;Real Life&#34; (by Senri Kawaguchi). They trade solos mid-video before transitioning into a heavier version of the song.",
    "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FifDJgNlg3sc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DifDJgNlg3sc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FifDJgNlg3sc%2Fhqdefault.jpg&key=982f25f1832140d79e2af93ff42af70c&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" title=\"YouTube embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>",
    "mode": "modal",
    "providerName": "YouTube",
    "providerUrl": "https://www.youtube.com/",
    "title": "Senri Kawaguchi &amp; Sarah Thawer Drum-Off",
    "url": "https://www.youtube.com/watch?v=ifDJgNlg3sc"
  },
  "geometry": {
    "width": 800,
    "height": 449.84615384615387
  },
  "modifiedAt": "2022-09-01T13:28:47Z",
  "modifiedBy": {
    "id": "3074457356556534321",
    "type": "user"
  },
  "position": {
    "x": 3700,
    "y": -300,
    "origin": "center",
    "relativeTo": "canvas_center"
  }
}

Hey Aleksandr - Do you mean you are trying to send a request by setting the html in the data/body? 

The data/html property isn’t something you can set, it’s just part of the response you get back after successful creation :)

Hopefully this helps!

It sounds like something might be wrong with the board you’re working with. Can you test something for me and try to send the response (with only URL) to a different/new board?