Embedding Rise courses on websites using iFrame

We had a number of clients with similar requirements, and for a couple of years we were able to insert code into the top-level RISE html page dynamically that made a few tweaks to the RISE content and also signaled to our wrapper page to let it know how large to make the IFRAME. 

Sadly, this stopped working about 6 months ago... with page content not resizing correctly, or jumping around as it was rendered. As a result, we've now successfully developed another approach that inserts the required headers and footers from our site into the RISE content, thus allowing the content to appear as if it is part of the client's site without needing to use an IFRAME.

I won't try to paste content into this editor, but essentially:

1. We build a collection of all "container" elements in RISE (IDs are "cover" and  "page_wrap")
2. Within each of these we look for the element with ID "cover__header", or "page__header" and pad it sufficiently for our header.
3. We insert our header as the first child of the container from step 1
4. We insert our footer as the last child of the container from step 1

This works a treat, but remember that any hyperlinks need to target _top as the content is rendered within an IFRAME anyway - if you're using a SCORM wrapper, that is!

This approach works well with the newer-style RISE content that uses floating controls for next/previous lesson - but you need to ensure your headers and footers don't have similar coloured backgrounds as they can "blend in".