How to load API data video url in react js

Question

I have installed dompurify react js library and loaded all the contended as it is from API but API youtube URL video failed to load but can be seen in API.

API:

{
    "id": 5,
    "name": "shahiraja",
    "title": "text below as a natural lead-in to additional content. This content is a little bit l text below as a natural lead-in to ad",
    "image": "/media/resources/Screenshot_from_2021-09-14_19-13-25.png",
    "created_at": "2022-01-03T08:07:44.451476Z",
    "body": "<p><iframe frameborder=\"0\" src=\"//www.youtube.com/embed/LNkdmyHp5Co\" width=\"640\" height=\"360\" class=\"note-video-clip\"></iframe><a href=\"https://www.youtube.com/watch?v=LNkdmyHp5Co\"></a><br></p>",
    "category": 1
}

Code:

<div
    class="col-md-10"
    dangerouslySetInnerHTML={{ __html: sanitize(body.body) }}
></div>

Drew Reese · Accepted Answer · 2022-01-06T05:10:34.627

1

Looks like sanitize is a bit too opinionated for your needs out-of-the-box, the iframe is stripped out. You can pass a configuration and allow the iframe tag.

<div
  className="col-md-10"
  dangerouslySetInnerHTML={{
    __html: sanitize(body.body, { ADD_TAGS: ["iframe"] })
  }}
/>

edited Jan 06 '22 at 05:10

answered Jan 06 '22 at 05:05

Drew Reese

165,259
14
153
181

1

It worked thanks, can i have a link to read more about it – AMRIT SHAHI Jan 06 '22 at 05:43
@AMRITSHAHI There's nothing quite like [official documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify) , it just takes a minute to grok from all the examples. For example, I had initially said to use the `ALLOWED_TAGS` but this excluded ***all other tags***, so had to find what was less restrictive. Turns out we just wanted only to add `iframe` to the already preset list of accepted tags. – Drew Reese Jan 06 '22 at 05:45

score 0 · Answer 2 · answered Jan 06 '22 at 05:19

If from API you are getting the data as an HTML code then its better to go with

dangerouslySetInnerHTML

Otherwise if you get the URL of file then simply use the video tag.

<video
    autoPlay
    playsInline
    muted
    src={src}
    onLoadedData={onLoadedData}
    style={{ opacity: isVideoLoaded ? 1 : 0 }}
  />

How to load API data video url in react js

2 Answers2