SCORM Embedded in a Moodle Page - Black Bars Above and Below on iPhone
We usually display SCORMS in a popup window, but we have a course or two where we are including the SCORMs within (Moodle) lesson pages, using an iFrame. We are finding that the display of these SCORMs on mobile phones is less than optimal, because there are large black bars appearing above and below the SCORM within the iFrame window. Here's an example:
It appears to me that the black bars may be resulting from a script in the SCORM that's calculating the window size based on the total browser window size, and trying to center the SCORM within that, but because this SCORM is being displayed in an iFrame, it's not using the right part of the DOM.
So I've figured out the CSS to use to get a nice iFrame window for the SCORM that's exactly the right aspect ratio, but unfortunately the SCORM is still being placed in that same set of black bars, so now the only part you can see is the top part -- meaning the user can't even access the SCORM. See what I mean:
This is Articulate Storyline 2, BTW, if that helps. And the Moodle theme is bootstrap-based, which gives us access to bootstrap css. (That's how I got the way to set the correct aspect ratio for the SCORM.)
I'd really appreciate any thoughts from anyone who has conquered the Mobile SCORM-in-an-iFrame-in-a-Lesson problem.
Thanks in advance.