Kaltura thumbnail video in a script tag not working in react but displaying empty space

Question

I am using a Kaltura Thumbnail embed in React which is a script tag when I am using the same script tag in Basic HTML page it is working fine but when I am using the same script tag in React, It is showing an empty space instead of video, when I did inspect element I am able to see all the css elements and div for that script. Here is the script tag which i used in React. I am a Newbie here, Please help. Thanks in Advance.

function App() {
  var x='<script src="https://cdnapisec.kaltura.com/p/3064193/sp/306419300/embedIframeJs/uiconf_id/46610723/partner_id/3064193"></script>
<div id="kaltura_player_1605008383" style="width: 560px; height: 395px;"></div>
<script>
kWidget.thumbEmbed({
  "targetId": "kaltura_player_1605008383",
  "wid": "_3064193",
  "uiconf_id": 46610723,
  "flashvars": {},
  "cache_st": 1605008383,
  "entry_id": "1_0clle8xt"
});
</script>'


return (
<div dangerouslySetInnerHTML={{__html: x}}></div>
);
}

export default App;

Answer 1

There are a lot of reasons this code is not working. The Kaltura setup code would need to be enclosed in `` backtick template literals. But even so, react is not set up to parse <script> includes.

One route would be to use this project: https://github.com/christo-pr/dangerously-set-html-content#readme which is designed to solve that issue.

And if you are using react native, here is a project that may work: https://github.com/rafalkaczynsky/react-native-kaltura-player-v3