0
172
ViewsHow to load API data video url in react js
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>
·
Juan Pablo Isaza
2 answers
Answer question0
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"] })
}}
/>
·
Juan Pablo Isaza
Report
0
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 }}
/>
·
Juan Pablo Isaza
Report
Answer question