iframe embed

By James KanjoJames Kanjo

Description

Throughout the whole of Wikidot, people are putting HTML code into code-blocks, and then iframing the Wikidot-generated HTML page.

Iframing HTML gives a result somewhat like embedding the HTML in the Wikidot page, but is secure. Whereas embedded code comes from the same domain as the page, and can thus use (steal or abuse) security cookies or resources, iframed code comes from a different domain (wdfiles.com) and thus has no access to the wikidot.com resources.

Just about every single day on the Wikidot community forums, we get somebody asking how to embed [x] code on [y] page. And every time we tell them:

[!--
[[code]]

[x] code goes here

[[/code]]
--]

[[iframe /local--code/THIS_PAGE'S_NAME]]

This becomes problematic when they try to “embed” a set of HTML code on the one page, at which point we need to tell them to append /1 or /x to the iframe URL, depending on the index of the code.

This is information that they don't really understand, and nor should they need to. So I devised this new special code that will iframe any embed code automatically.

Code

In action

[[embed]]
<iframe class="" style="" frameborder="0" width="100%" height="350px" align="" scrolling="auto" src="http://snippets.wdfiles.com/local--code/code:iframe-embed#%3Cobject%20width%3D%22334%22%20height%3D%22326%22%3E%3Cparam%20name%3D%22movie%22%20value%3D%22http%3A//video.ted.com/assets/player/swf/EmbedPlayer.swf%22%3E%3C/param%3E%3Cparam%20name%3D%22allowFullScreen%22%20value%3D%22true%22%20/%3E%3Cparam%20name%3D%22wmode%22%20value%3D%22transparent%22%3E%3C/param%3E%3Cparam%20name%3D%22bgColor%22%20value%3D%22%23ffffff%22%3E%3C/param%3E%20%3Cparam%20name%3D%22flashvars%22%20value%3D%22vu%3Dhttp%3A//video.ted.com/talks/dynamic/DavidLogan_2009-medium.flv%26su%3Dhttp%3A//images.ted.com/images/ted/tedindex/embed-posters/DavidLogan-2009.embed_thumbnail.jpg%26vw%3D320%26vh%3D240%26ap%3D0%26ti%3D651%26introDuration%3D16500%26adDuration%3D4000%26postAdDuration%3D2000%26adKeys%3Dtalk%3Ddavid_logan_on_tribal_leadership%3Byear%3D2009%3Btheme%3Dnot_business_as_usual%3Btheme%3Dnew_on_ted_com%3Btheme%3Dthe_rise_of_collaboration%3Bevent%3DTEDxUSC%3B%26preAdTag%3Dtconf.ted/embed%3Btile%3D1%3Bsz%3D512x288%3B%22%20/%3E%3Cembed%20src%3D%22http%3A//video.ted.com/assets/player/swf/EmbedPlayer.swf%22%20pluginspace%3D%22http%3A//www.macromedia.com/go/getflashplayer%22%20type%3D%22application/x-shockwave-flash%22%20wmode%3D%22transparent%22%20bgColor%3D%22%23ffffff%22%20width%3D%22334%22%20height%3D%22326%22%20allowFullScreen%3D%22true%22%20flashvars%3D%22vu%3Dhttp%3A//video.ted.com/talks/dynamic/DavidLogan_2009-medium.flv%26su%3Dhttp%3A//images.ted.com/images/ted/tedindex/embed-posters/DavidLogan-2009.embed_thumbnail.jpg%26vw%3D320%26vh%3D240%26ap%3D0%26ti%3D651%26introDuration%3D16500%26adDuration%3D4000%26postAdDuration%3D2000%26adKeys%3Dtalk%3Ddavid_logan_on_tribal_leadership%3Byear%3D2009%3Btheme%3Dnot_business_as_usual%3Btheme%3Dnew_on_ted_com%3Btheme%3Dthe_rise_of_collaboration%3Bevent%3DTEDxUSC%3B%22%3E%3C/embed%3E%3C/object%3E"></iframe>
[[/embed]]

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

rating: +8+x
gerdamigerdami 1256815612|%e %b %Y, %H:%M %Z|agohover

James,
Can you modify your javascript to get actual values for width and height from the code-to-be-embedded and put them in the iframe parameters?

unfold by gerdamigerdami, 1256815612|%e %b %Y, %H:%M %Z|agohover
Sorry, I can not follow.
Steven HeynderickxSteven Heynderickx 1257013751|%e %b %Y, %H:%M %Z|agohover

Could you describe maybe in a how-to, how to do this.

unfold Sorry, I can not follow. by Steven HeynderickxSteven Heynderickx, 1257013751|%e %b %Y, %H:%M %Z|agohover
Re: Sorry, I can not follow.
James KanjoJames Kanjo 1257035044|%e %b %Y, %H:%M %Z|agohover

Sure… I'll try to push one through in less than 24 hours


λ James Kanjo | blog | photos | contact

unfold Re: Sorry, I can not follow. by James KanjoJames Kanjo, 1257035044|%e %b %Y, %H:%M %Z|agohover
Re: Sorry, I can not follow.
James KanjoJames Kanjo 1257090337|%e %b %Y, %H:%M %Z|agohover

http://www.youtube.com/watch?v=i29FIIRpFsY


λ James Kanjo | blog | photos | contact

unfold Re: Sorry, I can not follow. by James KanjoJames Kanjo, 1257090337|%e %b %Y, %H:%M %Z|agohover
Very nicely done!
Steven HeynderickxSteven Heynderickx 1257114772|%e %b %Y, %H:%M %Z|agohover

You made a good video… very helpfull!

unfold Very nicely done! by Steven HeynderickxSteven Heynderickx, 1257114772|%e %b %Y, %H:%M %Z|agohover
Re: Very nicely done!
tsangktsangk 1257744412|%e %b %Y, %H:%M %Z|agohover

Powerful snippet…. Powerful Video!

Basically just a smiplified version of mine: http://community.wikidot.com/forum/t-111225/embed-anything


First Wikidot Wiki with a Chinese Domain! -> http://曾勁驊.info.tm/ or http://kenneth.wikidot.com

Out of your site limit? I've got 996 sites left. Ask me and I'll create one for you! Just PM me and let me know.^

^If you require an Iron Giant Template cloned site, please tell me that too!

last edited on 1257744577|%e %b %Y, %H:%M %Z|agohover by tsangk + show more
unfold Re: Very nicely done! by tsangktsangk, 1257744412|%e %b %Y, %H:%M %Z|agohover
Thanks!
Steven HeynderickxSteven Heynderickx 1257064723|%e %b %Y, %H:%M %Z|agohover

If it's going to be here, no problem, I'm watching this page. Otherwise post a link here if you will.

unfold Thanks! by Steven HeynderickxSteven Heynderickx, 1257064723|%e %b %Y, %H:%M %Z|agohover
This one dont work for me, any idea why?
lezardablelezardable 1257999670|%e %b %Y, %H:%M %Z|agohover

can you explore how to iframe embed java applets to wikidot. Thank you and hoping someone will give a hand.

unfold This one dont work for me, any idea why? by lezardablelezardable, 1257999670|%e %b %Y, %H:%M %Z|agohover
Re: This one dont work for me, any idea why?
James KanjoJames Kanjo 1258020281|%e %b %Y, %H:%M %Z|agohover

Hey man, I'll try to help you out :)

Can you give me an example of a java applet? I've never embedded one into a website before, so I need to know what one looks like to do it…


λ James Kanjo | blog | photos | contact

unfold Re: This one dont work for me, any idea why? by James KanjoJames Kanjo, 1258020281|%e %b %Y, %H:%M %Z|agohover
That "Code" box is the best....
pissstoppissstop 1258401473|%e %b %Y, %H:%M %Z|agohover

I really was having a hard time embedding a blogspot widget that I created with widgetbox until I found this page. Thanks, I finally got it to work!!

unfold That "Code" box is the best.... by pissstoppissstop, 1258401473|%e %b %Y, %H:%M %Z|agohover
Add a new comment
page_revision: 16, last_edited: 1257077598|%e %b %Y, %H:%M %Z (%O ago)
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License