Storyline 360 lets you control several attributes 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 scales to fill the browser window
  • Whether the course launches in the same window or a separate window

To set these options, go to the Home tab on the Storyline ribbon and click Player. When the Player Properties window appears, click Other on the ribbon.

In this user guide, we'll explore:

Choosing the Browser Size

You can define how learners’ browsers behave when they launch your course on laptop and desktop computers. Use the Browser size drop-down to choose one of these options:

Display at user’s current browser size

This displays the course using the learner's current browser size.

Resize browser to optimal size

This automatically resizes the learner's browser to match the course's optimal size.

The optimal size is whatever you chose as the slide size plus additional width and height to accommodate the player frame.

Depending on the features you include in your player, it adds between 20 and 260 pixels to the width of your course, and between 20 and 118 pixels to the height. See below for details.

Resize browser to fill screen

This automatically resizes the learner's browser to fill the whole screen.

 

Note: The browser size property isn’t applicable to mobile devices or the responsive player.

Choosing the Player Size

You also have control over the size of the standard player when learners view your course on laptop and desktop computers. Use the Player size drop-down to choose one of these options:

Scale player to fill browser window

This scales your published course 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 stay at its optimal size.

By default, the optimal size is whatever you chose as the slide size plus additional width and height to accommodate the player frame.

Depending on the features you include in your player, it adds between 20 and 260 pixels to the width of your course, and between 20 and 118 pixels to the height. See below for details.

 

Note: The player size property isn’t applicable to mobile devices. The responsive player will always appear as a thin bar along the side or bottom of mobile devices, allowing your slide content to fill the available screen real estate on tablets and smartphones.

Calculating the Dimensions of Your Published Course in the Standard Player

The overall size of your published output will be slightly larger than your slide dimensions. That's because the standard player adds some width and height when your course is viewed on laptop and desktop computers.

The standard 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, closed captioning button, 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

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. (Be sure to give learners the link to the launcher.html file in your published output rather than the default story.html file.)

Then decide how the new window will display. Choose one or both of the following:

Display window with no browser controls

If you mark this box, the new window 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 same controls as the parent window.

This player property only applies to the standard player.

Allow user to resize browser

Mark this option to let learners resize the browser window.

This player property only applies to the standard player.

Saving Player Changes

When you click OK to close the Player Properties window, Storyline saves your player customizations in your project file.

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 your custom player if you're prompted and click OK.

To learn more about the Current Player options, see this user guide.

You Might Also Want to Explore:

Interactive Demo: Which Player Properties Are Supported in the Responsive Player?