Options beyond using an iFrame

We utilize Storyline and Rise. Currently, external users access our products on a webpage which is required to have a header and footer with required content. The Storyline/ Rise products are embedded into the webpage using an iFrame.

The issue...

The header and footer are "clunky" and provide the learner with a discontinuous interaction because there are menus part of the Storyline/Rise product, and interactions that are part of the header/footer. We have explored the possibility of adding a button to the html file that allows the browser to go into full screen. It works nicely, but not on mobile interactions because IOS doesn't allow the API to work. We also explored the potential to build the header and footer into the storyline file (noting the real estate it removes.) The issue is we are still required to have an index.html webpage where the product must be embedded. Lastly, we have tried to use Javascript and a trigger to make the Storyline product go full screen but it's a moot point because it goes fullscreen inside the iFrame, and it's not possible to do this with Rise.

We were wondering if the community had recommendations beyond the use of an iFrame?