How to embed CP project on webpage with iFrame and keep responsive behavior

Report · May 11, 2017

HI

Due to total server space limits I want to store the CP project files on Amazon AWS S3.

Using iframe or embed I can view the lesson including the interactions just fine on a desk top.

When going to an iPhone the responsive behavior seems blocked by the site's css or something? When I just link to the index.html file directly the responsiveness seems to work fine.

Here's my working site link

https://accendoreliability.com/s02-introduction/

There are two instances of the CP content on the page - the first is via an iframe, the link, "AWS S3 based lesson" is a simple link to the index.html file opening a new page. The lesson settings include that when it ends to goto back to the link where started.

My question is what is the right way (or good way) to deliver the CP lessons when storing/serving the files from Amazon S3 (cloud storage) and keeping responsive behavior across devices?

I'll be charging for the courses or want limited access to the lessons, which the site can do by controlling membership access to pages/posts, etc. Not too sure how to conceal or protect the url's from loading the CP files outside the protected site, once they become visible ...

Mostly struggling with how to deliver responsive CP content stored on cloud server within a specific website post or page. Not sure if this something done in CP itself, within the iframe or link, or with HTML/CSS on the site, or some combination?

thanks in advance for your suggestions

Report · May 11, 2017

Hi Fred,

This is a multi layered question and there are others who may have more expertise with AWS3 but I can offer some insights to other portions of your question. If you place your iFrame in a Fluid box it should scale.

In regards to "I'll be charging for the courses or want limited access to the lessons, which the site can do by controlling membership access to pages/posts, etc. Not too sure how to conceal or protect the url's from loading the CP files outside the protected site, once they become visible ... "

I see you are using Wordpress, you may seriously want to look at an Learning Management System (LMS) creates specifically for WordPress called LearnDash. it is relatively inexpensive (about $220.00 USD) with all the bells and whistles, and you can do all that you are asking for, (payment, membership, limit access) with additional 3rd-party plugins (some free, some not) as well as track progress, give badges etc. You can also one click load Captivate modules to your WP Media library or just use an iFrame You can also easily and logically create lessons and courses and generate reports.

I was really impressed with it. There is however a learning curve and it will take some time to understand and integrate into your system. If you don't want to go that route you can hobble together your own solution, for example you can password protect each module and add membership plug ins to your WP site for forums etc. They have no trial version but they do have a 30 day refund policy and they are prompt if you choose not to use it.

I should also mention Adobe has its Adobe Prime LMS which is a easy to learn, easy to use SaaS service and very polished. This will meet your needs quite nicely but there is a significant investment required and ongoing fees.

Cheers,
Steve

Report · May 11, 2017

Hi Steve,

Thanks for the note and I'm not sure I understand placing the iFrame in a fluid box.

The iframe tag is on the webpage and pointing to the captivate set of files, specifically the index.html file to launch the project within the iframe on the page. On a desktop the project scales fairly well and pretty much behaves as expected.

The problem is on an iPhone and I suspect other devices, that the responsive behavior get mucked up when being viewed through the iframe on the website. The responsiveness seems to work as expected when opening the index.html file located on the AWS S3 when done directly. So suspected something on the site's html or css that is a problem.

I have Learn Dash and agree it is a really good LMS, it's on a different site that where this project needs to display. The site I'm working on is also locked down to not allow me or anyone from loading wordpress plugins... else I would be using Learn Dash. This Rainmaker site has a bunch of good features and stability that am not able to replicate on a more open WP site, thus trying to get this working by brute force to some extent.

Yes, the Adobe Prime LMS looks great and is outside my budget at the moment, plus really do not want to shift students off the site to another site for the course material, if possible.

Cheers,

Fred

Report · Oct 31, 2017

Hi all

Coming in a bit late to this discussion but I'm struggling with LearnDash/Captivate integration myself. StevePixel - you mentioned there'a 'one-click load' option - I was just wondering if that's something built-in to LearnDash or is a plugin/a workaround required? I'm on a bit of a steep learning curve at the moment (tho I'm thoroughly enjoying it) and would appreciate any tips any of you might have...

Cheers

Nick

Report · May 11, 2017

Hi Fred,

Are you using Captivate 2017 ? or a previous version?

Cheers,
Steve

Report · May 12, 2017

Hi Steve, the latest version CP 2017... not sure what to do with fluid boxes as of yet....

Report · May 12, 2017

Hi Fred,

They are new and are media containers that provide great flexibility in responsive design, It should resolve your AWS embed issue. There are a bunch of articles on Fluid Boxes here on forum or one new one just dropped

https://elearning.adobe.com/2017/05/using-fluid-boxes-knowledge-facts-1/

Cheers,
Steve

Report · May 12, 2017

Thanks I'll check it out and give this a try. So your note to place the iframe within the fluid box, the iframe that contains the embedded video or link to the video... right.

A big part of the issue is with the knowledge check slides, so going to to explore how to set those up with fluid boxes, too.

off to learn some more.

Cheers,

Fred

Report · May 12, 2017

Hi Fred,

Ok just has a thought. When you are publishing, you are publishing to HTML5 correct? If you are then you need to link it via the multiscreen.html, not the index.html because the multiscreen,html determines if its a mobile device or desktop then opens the appropriate package. Index.html generally loads the swf version, which most mobile devices don't support.

Cheers,

Steve

Report · May 12, 2017

Steve? I am stumped now. Responsive projects cannot be published to both SWF and HTML5, but only to HTML5. Moreover I learned that since one of the last versions of 9 the multiscreen.html work flow is not working really. Did you use it recently for a normal project, where it is possible?

Report · May 12, 2017

Hi Lilly,

You are right! I'm not sure Fred ever said it was a Responsive Project- just "responsive behavior" So just checking to be sure. I was unaware that the multi-screen wasn't working.

Cheers,

Steve

Report · May 12, 2017

He talks about 'responsive behavior across devices'. How can you have that behavior with a normal project? A scalable project is to me not the same as being responsive, maybe there is the origin of the confusion.

About the multiscreen.html. The output to HTML5 and SWF has become more different in behavior (effects and interactions are some examples). I have been publishing to both in the past (with CP8) but it seems not to work for me anymore since second version of 9. That is why I now always publish separately, but that means that the multiscreen.html is not useful anymore. SWF output will disappear for sure..

Report · May 12, 2017

Hi Steve and Lilybiri, I'm working from the start on CP 2017 with a responsive project. The publish to device only outputs to html5, I think. And, yet I'm talking about responsive behavior as in how a responsive project should resize to the screen, not just rescale (very tiny on smart phone...)

Plenty to learn on making this all work well for the delivery process via my site (which doesn't permit adding plugins and has server file storage limits which is complicating the process by having to move content to cloud storage).

So far the initial checks and feasibility of doing what I'm trying to do appears to be working - almost.

I'm going to explore using fluid boxes and see what benefits that provides and going to adjust the CSS controlling the iframe size dynamically based on content reflow changing the size.

Just tried the following CSS applied to the iframe containing the link to the index.html file:

div.spc-responsive-cont {

display:flex;

flex-direction:column;

}

div.spc-responsive-cont iframe {

flex:1;

}

It is applied to the top embed on the page, while the second one is just an iframe with my first try at setting the iframe size to adjust depending on width to a percentage of width for height... clunky and not effective, still smashing the CP project content into a wrong size window.

Not perfect yet getting pretty close. Thanks for the suggestions here, more experimenting to go.

Cheers,

Fred