How to load API data video url in react js-CodePudding

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
    
    dangerouslySetInnerHTML={{ __html: sanitize(body.body) }}
></div>

CodePudding user response：

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"] })
  }}
/>

CodePudding user response：

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}
    onl oadedData={onLoadedData}
    style={{ opacity: isVideoLoaded ? 1 : 0 }}
  />