0

I am attempting to publish an Adobe Captivate project to a WordPress blog. The .swf file is easy enough to handle, but the HTML5 version is giving me problems.

The way that Captivate outputs HTML5 is as a folder that includes an index.html file and other folders with various resources that are references in the index.html file (e.g., as ./images/picture.jpg).

I have several goals, in decreasing order of importance:

1) Be able to insert the HTML5 content into a WordPress post (including uploading the content).

2) Have the content "window" automatically fill the area WordPress has available, as if it were a simple video. (I ask this question because I tried using iFrames and they have a fixed size, unless I'm missing an option).

3) Be able to restrict access so that someone can only access the file through the WordPress post (rather than, say, directly following the URL for the index.html file).

Is this possible?

1

This plugin should do exactly what you're looking for: http://wordpress.org/plugins/shortcurl/ it will allow you to embed a shortcode in your post that should go grab external content and place it exactly how you'd like it to.

Since it's not an iFrame, you should also be able to style the content appropriately without much issue (if necessary).

UPDATE: Since the whole page may not render properly inside the post context, you might try the following (or something similar) for the shortcurl short code:

[remote_get url="/path/to/index.html" start="<body>" end="</body>" replace="<body>" with="" replace2="</body>" with=""]
  • I tried and this isn't working. I think the problem might be that the Captivate index.html file is a full HTML file, with <html> tags, a <head> section, etc., and I'm trying to load it when I'm already in the body of the original page. – philosophyguy Oct 3 '13 at 16:42
  • @philosophyguy, shortcurl allows you to specify start and stop points in the file. Check out the usage info here for more specifics: wordpress.org/plugins/shortcurl/faq - if you can share more specifics on what the DOM of the Captivate index.html file looks like, I can probably help craft the shortcode syntax you'd need. – murdaugh Oct 3 '13 at 16:55
  • I'm not sure how Adobe generates this file and so how much will change from file to file, but from my test file the setup is: in the <head>, a couple of <meta>, <link rel> to stylesheets and <script> links to js. Then a <style> block. Then the <body> starts, with a couple more <script>s and <link rel> to .css, then a couple of large <div>s with content, then a <script> block with the code directly written there. – philosophyguy Oct 3 '13 at 17:00
  • If you are able, drop the contents of your index.html into gist.github.com. I'm guessing you could set your start to <body>, your end to </body> and then replace <body> and </body> with an empty string. See my update. – murdaugh Oct 3 '13 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.