Remove Player Border - HTML5 output (Articulate Storyline 2)

Hello everyone-

I'm wondering is someone would be able to assist me in removing the player border completely. I am aware of the player options and changing the transparency to zero, however I'm trying to remove this completely. 

I've published something the iPhone and it does not appear to be filling the browser because of this. I'd like it to be corner-to-corner with no gaps. I've even tinkered around with the javascript and still nothing. I'm familiar with javascript so if someone knows something there as a workaround, I'm open. 


20 Replies
Stephanie Harnett

Hi Maurice. Have you tried editing the story.html (and _html5) to remove the player border?

Look for this line:

var g_strWMode = "window"; // opaque | window (use "window" for optimal performance, opaque for webobject support)

and change it to this:

var g_strWMode = "transparent"; // opaque | window (use "window" for optimal performance, opaque for webobject support)

Parichaya Kanungo

Yeah there is a solution to this issue..... Just have to make the border transparent in the player.

Go to player properties -> colours & effects -> Advanced Color editing ->

Choose Edit item: Base>> There would be seven base items like bg, border, diva, divb etc...

Just make them 100% transparent..........Your player becomes transparent.

Now to hide the previous and next button, just go to story view and select all the slides and uncheck the previous and next, under the slide navigation controls.




Artur Trzebunia

Andrew, this line of code is very helpful and works partially for me. Thank you! I'm using Chrome. the player aligns at the top without any margin/padding, but there's still margin/padding in left, right, and bottom, i.e. the player does not fill the browser window completely. How do I remove the left, right, and bottom padding so the player fills the browser. Any ideas/additional code? Please see attached image.


Christie Pollick

Hi, Darlene -- Thanks for reaching out, and while I do not have any updates to share at this time, I did want to let you know that you are welcome to share your thoughts with our Product team via this form. And although we are not able to announce product roadmaps or release dates for new products/features or updates, you may wan to subscribe to the Word of Mouth Blog for updates.  

Anderson Camargo Lopes

Hi, I have not yet been able to remove the "white" border around my "stage" when I run the "story.html" version. However, when running the version "story_html5.html" that same border does not appear. Has anyone managed to figure out how I take the edge? Sorry, my english, I'm using google translate.

Leslie McKerchie

Hello Anderson and welcome to E-Learning Heroes :)

Are you utilizing one of the solutions above for transparency and that's not working as expected? Would you be able to share the .story file for me to take a look? Even just a sample slide in a .story file with the issue will be helpful. Thanks so much!

Anderson Camargo Lopes

Hello, my friend Nilo has managed to solve this, I just changed the line (var g_strWMode = "window"; // transparent | window (use "window" for optimal performance, transparent for webobject support) to (var g_strWMode = "transparent"; // transparent | window (use "window" for optimal performance, transparent for webobject support). Just switch window to transparent.