1

I am new with ReactJS. I have some problems with react-markdown. I want to embed a video using markdown.

Here is my simple example of my problem.

// import react-markdown
import ReactMarkdown from 'react-markdown'

// markdown string
const md = `
   Hello video embeded fro youtube.
   {/* how can I embed a video here */}
`

// use markdown
<ReactMarkdown
 linkTarget="_blank"
> {md} </ReactMarkdown>
RubenSmn
  • 4,091
  • 2
  • 5
  • 24
USER2022
  • 39
  • 3

2 Answers2

1

You could do this by writing a iframe inside the markdown.

For this to work you'll need to install rehype-raw which is a plugin you can use with ReactMarkdown.

yarn add rehype-raw
# or
npm install rehype-raw --save

Then you can use it like this

import rehypeRaw from "rehype-raw";

const md = `Hello this video is embeded from Youtube!

<iframe width="560" height="315" src="https://www.youtube.com/embed/JvwW5Tsf97c" />`;

return (
  <ReactMarkdown rehypePlugins={[rehypeRaw]} linkTarget="_blank">
    {md}
  </ReactMarkdown>
);

Note that you'll need a embed Youtube link and not a ?watch= link.

RubenSmn
  • 4,091
  • 2
  • 5
  • 24
0

    const App = () => {
  const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`;

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

export default App;


const App = () => {
  const data = `lorem ipsum <img src="" onerror="alert('message');" />`;

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

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Hassan Haroon
  • 26
  • 4