Align the course in the player

Jul 05, 2012

Hello people!

Does anyone know how to modify the player to align the course at the top when the browser window is narrow?

I took this screenshot so you can see what I mean.  It automatically centres it and I would like to have it at the top.

15 Replies
Mariano Aran

Thanks Jeanette.

Unfortunately Phil's tip didn't fix the issue, and I tried all possible combinations.

I asked Andy for some specifics about how he fixed it but he hasn't replied back, so I'm not sure how he solved the issue, so I'm bumping this thread hoping someone with the knowledge on how to fix this sees it

Phil Mayor

Which version of moodle are you using?

Are you opeing in a new window?

Have you installed it as a SCORM?  You may need to edit the scorm window in moodle. 

You may need to play with the browser window settings in player templates and remember to the select the new template when you publish, allowing the window to be resized in moodle may also help.

The player.html file already loads the course in at 0,0 so it is likely a moodle issue, and you would therefore need to edit your scorm window

Mariano Aran

Thanks for your reply Phil. 

I opened this post asking specifically about the Articulate Player, looking for someone that knows how to hack it to align it at the top as I feel that will solve my problem, that's why I didn't put anything related to Moodle so people don't get confused.

I this post is all the info related to Moodle, I think it might be better to continue the conversation over there so not to mix the posts

Thank you Phil!, I appreciate your patience and willingness to help  :)

Steve Flowers

Hi, Erica - 

The player is set to resize to 100% on both axis within a table that is set to fill the space it fills as well. You may be able to adjust the height of the table dynamically based on the detected width of the window. 

As it is, the table inflates to fill the size. 

table width="100%" height="100%" 

When the Flash file reconfigures the display of the player and content to fill the space it's always going to center. Just the way the player is built. So our control point is the table that surrounds it.

What we want is to set the table width to 100% and set the height to a ratio that displays the presenter output at the top of the page. Should be easy to do. Will post something a bit later today. It'll be javascript magic but should be simple to pull off.

Mariano Aran

Steve!  Where do I send the box of beer????

I can't believe how easy it is when you know what you are doing!

For presenter, it worked like a treat, I changed the 100% to 63% (see below), and that made a perfect fit for the size of window width that I had!

document.write("<table width='100%' HEIGHT='63%' border=0 cellspacing=0 cellpadding=0>");

Tried changing the same value in story.html for storyline presentations but it didn't seem to do anything....

Steve Flowers

That one will work - simple and easy. This is another way to do it - Find the line in your player.html (or index_lms.html):


Paste this in its place:

var winW;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;

Mariano Aran

Ugh! maybe I gave the impression that I know what I'm doing, but I'm just very keen and a little adventurous, but... in reality, I don't know programming...  :-p

Because you're talking about player.html I assumed you're talking about presenter ublished files (not storyline) correct?

What I understood was that I need to deletethe whole line

document.write("<table width='100%' HEIGHT='100%' border=0 cellspacing=0 cellpadding=0>");

and put the whole code in your fist post but that didn't work... now nothing loads

There are two similar consecutive lines that have that command:

document.write("<table width='100%' HEIGHT='100%' border=0 cellspacing=0 cellpadding=0>");
document.write("<tr><td valign='top' align='center'>");

Tried replacing one, then both and nothing happened....

Then I just tried leaving this line in

document.write("<table width='100%' HEIGHT='100%' border=0 cellspacing=0 cellpadding=0>");

and just replaced the code in your second post so the result was

document.write("<table width='100%' HEIGHT='+winW*.65+' border=0 cellspacing=0 cellpadding=0>");

but then the window is aligned at the top but veeery small...

Thanks for your help! and sorry about my ignorance...

James Reid

Hi All. I am still trying to solve this issue. (how to align the player top-left when displaying in Moodle)

I have had success with the HTML5 version by adjusting alignment code in story.html and player.css files.

But where Flash is used (eg. in Chrome), the alignment problem persists.

Steve, I get the impression you tried to post a solution above? to dynamically adjust the height ... but it got garbled by the discussion board?

Please can you offer a re-statement, or any documentation or link to your solution? Or am I missing something? I don't understand "Grr... WTB a Code block..."

thanks. have a great day!

This discussion is closed. You can start a new discussion or contact Articulate Support.