Using iFrame on Steem Post
iFrame is a way to embed html from other web pages. However, this will allow malicious script to be inject to the webpage. Therefore, on steemit, they only allow a few website to embed their iFrame.
Good things about Steemit is that this project is open source, so I can easily access to their source codes on Github (steemit/condenser). According to this file: Sanitize.js, Steemit currently only whitelisted 3 websites. Which is YouTube, Vimeo and SoundCloud.
In this post, I am going to explain how to embed iFrame into your steem blog post.
Youtube
Youtube video can easily being embeded into your blog post because they will generate a iFrame for you to use.
1. On the Youtube Video page, click on the share button( 
)
2. Then, click on the embed button to generate an embedded link in iFrame.
3. Copy the iFrame.
4. Paste it on Steemit, or busy or what ever steem app you are using, and you are done.
Result
<iframe width="560" height="315" src="https://www.youtube.com/embed/F-L40Tb0cZ8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
will be:
Vimeo
Vimeo is a video-sharing website. This is the alternative to Youtube as a video hosting website. Same as Youtube, this can be done easily.
1. On the Vimeo page, click on the share button(
)
2. Copy the link
3. Paste it on Steemit, or busy or what ever steem app you are using, and you are done.
Result
<iframe src="https://player.vimeo.com/video/98417189" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/98417189">20syl - Kodama (official music video)</a> from <a href="https://vimeo.com/20syl">20syl</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
20syl - Kodama (official music video) from 20syl on Vimeo.
SoundCloud
SoundCloud is a website to share about your music. iFrame also work with this website.
1. On the SoundCloud page, click on the share button(
)
2. Click on Embed
3. Copy the iFrame
4. Paste it
Result
<iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/139390741&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
Alright, that's the end of the post, hope you guys find these tips useful.
About Me
I am Lai Weng Han (Johnson), you can find me on Twitter.
Aha! I always wondered if there is a way to put an iframe into it! This is going to be super interesting. I might test it out on my other posts later.
Thanks for the tips!
upvoted and resteemed
Thanks for finding it useful 😆
Been trying a few iFrame from other website, but does not work, so I go in and dissect their code.
Yes I realised that. Maybe steem post input only works with certain mark up notices. They have their own unique library.
The iframe that steemit allowed is at the source code here
Informative
Thanks for finding it useful.
Thanks for sharing. I guess. What I do is just put the link in my post. Is that bad?
@amarbir Using html
iframe, so how it looks like is something like thisJust paste the link in your post will do, cuz the closing tag
</ >is doing the trick instead of markdown.Alright. Thanks a lot for this sir.
You're welcome
Sometimes Mark down limits your ability to post something differently. Iframe could help you do something more.
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by superoo7 from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP. Be sure to leave at least 50SP undelegated on your account.