How to load API data video url in react js

user_17053312 0
Viewed 766

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>
dompurify reactjs javascript
2 Answers

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

Edit how-to-load-api-data-video-url-in-react-js

enter image description here

user_86908570

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 }}
  />
user_87176420
Related