html5 in iFrame get white background field


I want to convert all of our programs to the html5 format but I need to get rid of the background. Currently I run the player from a php program (story.php) which is having compatibility problems with SL3. The player won't run at all from the php program where it worked fine under SL2 (see image DNP-SL3.png)

Attached is an image of one of our programs accessed through a custom LMS (DNP-html5.png). When I use story_html5.html I get the white background field behind the player. I cannot get rid if it. Anyone have any ideas?

The player is wrapped in a php program to get the header and the action buttons at the bottom. The buttons are actions provided by our LMS and are needed for database interactions, so the php wrapper is necessary. There is a minor amount of styling from the LMS. The background field is responsive, it changes size along with everything else in the browser window. I've tried everything I can think of from tweaking the story_html5.html to the css styling.

The player is run within an iframe tag within a div class="playerWindow"

<iframe id="mainFrame" class="mainFrame" name="mainFrame" title="mainFrame" allowTransparency="true" frameBorder="0" seamless="seamless" src="<?=$startx?>">

where $startx is which ever format of the story file I configure it for. I know this is somewhat sketch but Ashley, if we could start a dialogue maybe you can help me move completely to SL3 and story_html5.html which is where I really want to take our online courses.

Thanks for any help,


2 Replies
Ashley Terwilliger-Pollard

Hi George,

I'm always happy to chat and start the dialogue, but this is well outside my area of expertise!  Storyline 3 does have a new HTML5 publishing engine compared to Storyline 2, so a lot of the code and background elements are different. Have you looked at starting a trial to test the same setup in your LMS with Storyline 3? 

As for where things stand now in your SL2 +LMS set up, it may be something our Support engineers can take a look at - can you share the code you're adding and examples by starting a case? 

Also, I know we have a bunch of experts in CSS editing and other coding changes here in the E-Learning Heroes community - anyone able to help George out?