Make iframes able to be in blogs

[xcollantes]

Blogs should have embedded content since this is common for users to see in blogs and enriches the user experience.

Challenge

ReactMarkdown does not natively support usage of HTML element. All elements will be treated as Markdown.

[xcollantes]

Solution

https://stackoverflow.com/a/70548866/8278075

Use rehype as a plugin for ReactMarkdown:

<ReactMarkdown
          components={ReactMarkdownRules()}
          rehypePlugins={[rehypeRaw] as any}
        >
          {markdownBody}
</ReactMarkdown>

You would add a blog entry in the Markdown file:

   <div
     style="padding-bottom:56.25%; position:relative; display:block; width: 100%"
   >
     <iframe
       width="100%"
       height="100%"
       src="https://youtu.be/j5a0jTc9S10?si=eGX-bRyQGBp4cAed"
       frameborder="0"
       allowfullscreen=""
       style="position:absolute; top:0; left: 0"
     >
     </iframe>
   </div>

[xcollantes]

All iframes must be responsive as we intend for users to mostly view site on mobile.