md.md

Embedding iframe on @dsabyte online editor

When publishing posts, you might often need to embed any content from some other website. You can just use the native iframe tag to embed any post.

Example - LinkedIn embed -still working ..

code

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6857907035879698432" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

Output

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6857907035879698432" height="250" width="100%" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

Allowed site

You can not embed the content from any site, here is the list of the site which you can embed.

1. Linkedin
2. Codepen
3. codesandbox

Example Codes

linkedin

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6857907035879698432" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

codepen.io

<iframe height="300" style="width: 100%;" scrolling="no" title="SVG Loading icons" src="https://codepen.io/aurer/embed/preview/jEGbA?default-tab=html%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/aurer/pen/jEGbA">
  SVG Loading icons</a> by Aurer (<a href="https://codepen.io/aurer">@aurer</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

codesandbox

<iframe src="https://codesandbox.io/embed/pensive-roentgen-silbi?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="pensive-roentgen-silbi"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

Upcoming embed support

• stack overflow
• twitter
• dev.to
• Github - repo, issue, profile, etc

References

• SO