{"id":750,"date":"2020-03-07T11:54:41","date_gmt":"2020-03-07T19:54:41","guid":{"rendered":"https:\/\/splot.ca\/writer\/?p=750"},"modified":"2020-03-07T11:54:41","modified_gmt":"2020-03-07T19:54:41","slug":"some-embed-magic","status":"publish","type":"post","link":"https:\/\/splot.ca\/writer\/2020\/750","title":{"rendered":"Some Embed Magic"},"content":{"rendered":"<p>A SPLOT champion Jess Wilkinson tweeted a question about embedding padlet content in a Writer SPLOT. Their embed code is HTML \/ iframe, and while you might think pasting it into the text editor will work, the iframe part is stripped out when a post is saved (this is WordPress, and the same thing happens in any WordPress site run under multisite).<\/p>\n<p>Since I have been doing some coding to make embeds work in the <a href=\"http:\/\/github.com\/cogdog\/splotbox\">SPLOTbox theme<\/a>, like the way you can embed YpuTube or flickr or giphy content just by entering the URL on a blank line.<\/p>\n<p>I pondered ways to do this here. My hunch is this should be a plug-in, as it&#8217;s not functionality every site would need, but also could be used outside the SPLOT. I have a rough alpha version running here, as the idea is that it could offer automatic embeds for several services.<\/p>\n<p>Interestingly, padlet supports this on WordPress.com but not self hosted!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/splot.ca\/writer\/files\/2020\/03\/padlet-embed.jpg\" alt=\"Note that padlet embeds by url only work on WordPress.com\" width=\"504\" height=\"392\" \/><\/p>\n<p>So now a reveal&#8230; it is working here, look a dull padlet embedded right in the editor! simply by putting on blank line, like this:<\/p>\n<pre>https:\/\/padlet.com\/cogdogblog\/aos9fosbbwk4<\/pre>\n<div class=\"padlet-embed\" style=\"border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4\">\n<p style=\"padding:0;margin:0\"><iframe title=\"My sumptuous wall\" src=\"https:\/\/padlet.com\/embed\/aos9fosbbwk4\" frameborder=\"0\" allow=\"camera;microphone;geolocation\" style=\"width:100%;height:608px;display:block;padding:0;margin:0\"><\/iframe><\/p>\n<div style=\"padding:8px;text-align:right;margin:0;\"><a href=\"https:\/\/padlet.com?ref=embed\" style=\"padding:0;margin:0;border:none;display:block;line-height:1;height:16px\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/resources.padletcdn.com\/assets\/made_with_padlet.png\" width=\"86\" height=\"16\" style=\"padding:0;margin:0;background:none;border:none;display:inline;box-shadow:none\" alt=\"Made with Padlet\"><\/a><\/div>\n<\/div>\n<p><em>(Note that in TRU Writer, the embed magica happens after you submit the draft or update and check the preview, that&#8217;s another long bug story).<\/em><\/p>\n<p>But wait, there is more. I am eager to test out features to auto embed H5P content, right now, this is working here in test mode only for content hosted at the new <a href=\"https:\/\/h5pstudio.ecampusontario.ca\/\">eCampusOntario H5P Studio site<\/a> (this limitation will go away once I get it fully functional, a site owner would need to add a list of H5P source sites as a plugin option). In this case, I simply paste the web address, for say <a href=\"https:\/\/h5pstudio.ecampusontario.ca\/content\/184\">this little demo of the 5 Rs of Open<\/a> on a blank line, like<\/p>\n<pre>https:\/\/h5pstudio.ecampusontario.ca\/content\/184<\/pre>\n<p>https:\/\/h5pstudio.ecampusontario.ca\/content\/184<\/p>\n<p>How is that for Magic? Amazing! Right?<\/p>\n<p><a href=\"https:\/\/giphy.com\/gifs\/thecoolidge-keanu-reeves-the-matrix-3rVfBUa9f0RErtMZBH\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/3rVfBUa9f0RErtMZBH\/giphy.gif\" alt=\"The Matrix GIF by Coolidge Corner Theatre - Find &amp; Share on GIPHY\" width=\"854\" height=\"480\" \/><\/a><\/p>\n<p>Woah, Neo (did you see what I did there?)<\/p>\n<p>Okay, this is really just a test to see if this work&#8230;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A SPLOT champion Jess Wilkinson tweeted a question about embedding padlet content in a Writer SPLOT. Their embed code is HTML \/ iframe, and while you might think pasting it into the text editor will work, the iframe part is stripped out when a post is saved (this is WordPress, and the same thing happens [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2],"tags":[134,40],"class_list":["post-750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-odd-ideas","category-published","tag-embed","tag-splot"],"splot_meta":{"author":"Alan Levine @cogdog","license":"by","footer":""},"_links":{"self":[{"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/posts\/750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/comments?post=750"}],"version-history":[{"count":1,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/posts\/750\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/posts\/750\/revisions\/751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/media\/749"}],"wp:attachment":[{"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/media?parent=750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/categories?post=750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/splot.ca\/writer\/wp-json\/wp\/v2\/tags?post=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}