By
James 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.






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?
Could you describe maybe in a how-to, how to do this.
Sure… I'll try to push one through in less than 24 hours
λ James Kanjo | blog | photos | contact
http://www.youtube.com/watch?v=i29FIIRpFsY
λ James Kanjo | blog | photos | contact
You made a good video… very helpfull!
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!
If it's going to be here, no problem, I'm watching this page. Otherwise post a link here if you will.
can you explore how to iframe embed java applets to wikidot. Thank you and hoping someone will give a hand.
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
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!!