Articulate Storyline lets you control several aspects of the browser and player for your published course, including:

  • The size of the browser window
  • Whether the course stays locked at the same size or lets learners scale it by adjusting the size of their browser windows
  • Whether the course launches in a separate window and, if so, the properties of that window

To set these options, you'll need to open the Player Properties window. Go to the Home tab on the Storyline ribbon and click Player

When the Player Properties window appears, click Other on the ribbon.

Choosing the Browser Size

Use the Browser size drop-down to choose one of these options:

  • Display at user's current browser size: This displays the course at the current size of the learner's browser.
  • Resize browser to optimal size: If you choose this option, the learner's browser will automatically resize to match the course's optimal size. The optimal size is whatever you've chosen as the slide size plus any additional width and height to accommodate the course player. Depending on the features and controls you've included on your player, it adds between 20 and 260 pixels to the width of your course and between 20 and 118 pixels to the height. If you need help understanding the various features and controls available, see this tutorial
  • Resize browser to fill screen: This automatically resizes the learner's browser to fill the whole screen.

Choosing the Player Size

Use the Player size drop-down to choose one of these options:

  • Scale player to fill browser window: This will scale your course (up or down) to fill the learner's browser window.
  • Lock player at optimal size: This locks the published course at its optimal size—even if learners resize their browser windows, the course itself will remain at its optimal size. The optimal size is whatever you chose as the slide size plus any additional width and height to accommodate the course player. Depending on the features and controls you've included on your player, it adds between 20 and 260 pixels to the width of your course and between 20 and 118 pixels to the height. If you need help understanding the various features and controls available, see this tutorial.

Calculating the Dimensions of Your Published Course

The overall size of your published output will be slightly larger than your slide dimensions. That's because the player (the interface around the perimeter of your slides) adds some width and height.

The player adds up to 260 pixels to the width and up to 118 pixels to the height, depending on the player features you choose. See the following table for details.

You can also enable and disable player features on a slide by slide basis, but the course size will remain the same for all slides—i.e., each player feature adds some width or height to your published course, even if it’s only used on a single slide.

Player Feature

Width

Height

Player frame (with or without player features)

+20 pixels

+20 pixels

Title

 

+23 pixels

One or more topbar tabs

 

+24 pixels

Volume controller, seekbar, or navigation buttons

 

+51 pixels

Sidebar

+240 pixels

 

 

Here’s an example: If your slide size is 720 x 405 and you enable the navigation buttons and sidebar, the overall dimensions of your published course are 980 x 476. Here’s the breakdown:

 

Width

Height

Slide size

720 pixels

405 pixels

Player frame

+20 pixels

+20 pixels

Navigation buttons

 

+51 pixels

Sidebar

+240 pixels

 

Published Course Dimensions

980 pixels

476 pixels

 

Tip: You can find your overall course dimensions by opening the story.html file from your published output in a text editor, such as Notepad, and searching for width and height.

Launching the Course in a New Window

If you want your course to launch in a new browser window via a launch page, mark Launch player in new window.

Then choose from these launch options:

  • Display window with no browser controls: If you mark this box, the new window in which your course launches will have no browser controls—it'll only display the address bar, which won't be editable. If you don't mark this box, the new browser window will have the usual controls that learners see on their browsers.
  • Allow user to resize browser: Mark this box if you want the learner to be able to resize the browser window in which the course launches.

Saving Player Changes

When you click OK to close the Player Properties window, Storyline saves your player customizations in your project file. However, if you'd like to use the same customizations in other projects, click Current Player on the ribbon and choose Save. Enter a name for the player if you're prompted and click OK.

To learn more about the Current Player options, see Saving Your Player or Switching to a Different One.