Engineer bro!

Sun Oct 24 2021 (2 years ago)

Engineer by mistake!

I am a software engineer by passion

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

code

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

Output

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

@dsabyte

© 2021 dsabyte. All rights reserved