Storyline 3 lets you choose your player size and whether your course launches in the same window or a separate window. Here's how.
\n
First, go to the Home tab on the Storyline ribbon and click Player. When the player properties appear, click Other on the ribbon. Then, follow the steps below to change the browser and player settings.
\n
\n
\n\n
You can control the size of your course on desktop computers. (On mobile devices, the player appears as a bar along the side or bottom of the screen.) Select one of these options from the Player size drop-down list.
\n
\n- Scale player to fill browser window: This scales your published course to fill the learner's browser.
\n- Lock player at optimal size: This is the default option. It locks the published course at its optimal size, which is the slide size plus additional width and height for the player frame. Even if learners resize their browsers, the course itself stays at its optimal size.
The player frame adds between 20 and 260 pixels to the width of your course and between 20 and 118 pixels to the height, depending on the player features you selected (see below). \n
\n\n
You can launch your course in a new browser window (or a new browser tab on mobile devices). Just mark the box to Launch player in new window. This adds a launcher.html file to your published output. Give learners a link to the launcher.html file rather than the default story.html file.
\n
When you launch a course in a new browser window, you also get to decide how the new window behaves on desktop computers. Choose from the following options. (These options don’t apply to tablets and smartphones.)
\n
\n- Display window with no browser controls: Mark this box to display the new window without any browser controls. It'll have an address bar, but it won’t be editable.
Uncheck this box to give the new browser window the same controls as the parent window. \n- Allow user to resize browser: Mark this box to let learners resize the browser window as they choose. Uncheck it to lock the browser at the optimal size to fit your course.
The optimal size is your slide size plus additional width and height for the player frame. The player frame can add up to 260 pixels to the width of your course and up to 118 pixels to the height, depending on the features you selected. See below for details. \n- Browser Size: Choose to open the new browser window at optimal size or let it fill the screen on desktop computers. (On mobile devices, the browser always fills the screen.)
The optimal size is your slide size plus additional width and height for the player frame. The player frame can add up to 260 pixels to the width of your course and up to 118 pixels to the height, depending on the features you selected. See below for details. \n
\n\n
The overall size of your published output will be slightly larger than your slide dimensions. 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 enable and disable player features on a slide by slide basis, but the course size will remain the same for all slides.)
\n
\n\n\n| \n Player Feature \n | \n\n Width \n | \n\n Height \n | \n
\n\n| \n Player frame (with or without player features) \n | \n\n +20 pixels \n | \n\n +20 pixels \n | \n
\n\n| \n Title \n | \n | \n\n +23 pixels \n | \n
\n\n| \n One or more topbar tabs \n | \n | \n\n +24 pixels \n | \n
\n\n| \n Volume controller, closed captioning button, seekbar, or navigation buttons \n | \n | \n\n +51 pixels \n | \n
\n\n| \n Sidebar \n | \n\n +240 pixels \n | \n | \n
\n\n
\n
\n
Here’s an example: Let's say 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. (This is also known as the optimal size of your course.) Here’s the breakdown:
\n
\n\n\n| | \n\n Width \n | \n\n Height \n | \n
\n\n| \n Slide size \n | \n\n 720 pixels \n | \n\n 405 pixels \n | \n
\n\n| \n Player frame \n | \n\n +20 pixels \n | \n\n +20 pixels \n | \n
\n\n| \n Navigation buttons \n | \n | \n\n +51 pixels \n | \n
\n\n| \n Sidebar \n | \n\n +240 pixels \n | \n | \n
\n\n| \n Published Course Dimensions \n | \n\n 980 pixels \n | \n\n 476 pixels \n | \n
\n\n
\n\n
When you click OK to close the Player Properties window, Storyline saves your changes in the current project file.
\n
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.
\n
To learn more about the Current Player options, see this user guide.
\n\n
Interactive Demo: Which Player Properties Are Supported in the Responsive Player?
Storyline 3 lets you choose your player size and whether your course launches in the same window or a separate window. Here's how.
\n
First, go to the Home tab on the Storyline ribbon and click Player. When the player properties appear, click Other on the ribbon. Then, follow the steps below to change the browser and player settings.
\n
\n
\n
Choosing the Player Size
\n
You can control the size of your course on desktop computers. (On mobile devices, the player appears as a bar along the side or bottom of the screen.) Select one of these options from the Player size drop-down list.
\n
\n- Scale player to fill browser window: This scales your published course to fill the learner's browser.
\n- Lock player at optimal size: This is the default option. It locks the published course at its optimal size, which is the slide size plus additional width and height for the player frame. Even if learners resize their browsers, the course itself stays at its optimal size.
The player frame adds between 20 and 260 pixels to the width of your course and between 20 and 118 pixels to the height, depending on the player features you selected (see below). \n
\n
Launching the Course in a New Window
\n
You can launch your course in a new browser window (or a new browser tab on mobile devices). Just mark the box to Launch player in new window. This adds a launcher.html file to your published output. Give learners a link to the launcher.html file rather than the default story.html file.
\n
When you launch a course in a new browser window, you also get to decide how the new window behaves on desktop computers. Choose from the following options. (These options don’t apply to tablets and smartphones.)
\n
\n- Display window with no browser controls: Mark this box to display the new window without any browser controls. It'll have an address bar, but it won’t be editable.
Uncheck this box to give the new browser window the same controls as the parent window. \n- Allow user to resize browser: Mark this box to let learners resize the browser window as they choose. Uncheck it to lock the browser at the optimal size to fit your course.
The optimal size is your slide size plus additional width and height for the player frame. The player frame can add up to 260 pixels to the width of your course and up to 118 pixels to the height, depending on the features you selected. See below for details. \n- Browser Size: Choose to open the new browser window at optimal size or let it fill the screen on desktop computers. (On mobile devices, the browser always fills the screen.)
The optimal size is your slide size plus additional width and height for the player frame. The player frame can add up to 260 pixels to the width of your course and up to 118 pixels to the height, depending on the features you selected. See below for details. \n
\n
Calculating the Dimensions of Your Published Course
\n
The overall size of your published output will be slightly larger than your slide dimensions. 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 enable and disable player features on a slide by slide basis, but the course size will remain the same for all slides.)
\n
\n\n\n| \n Player Feature \n | \n\n Width \n | \n\n Height \n | \n
\n\n| \n Player frame (with or without player features) \n | \n\n +20 pixels \n | \n\n +20 pixels \n | \n
\n\n| \n Title \n | \n | \n\n +23 pixels \n | \n
\n\n| \n One or more topbar tabs \n | \n | \n\n +24 pixels \n | \n
\n\n| \n Volume controller, closed captioning button, seekbar, or navigation buttons \n | \n | \n\n +51 pixels \n | \n
\n\n| \n Sidebar \n | \n\n +240 pixels \n | \n | \n
\n\n
\n
\n
Here’s an example: Let's say 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. (This is also known as the optimal size of your course.) Here’s the breakdown:
\n
\n\n\n| | \n\n Width \n | \n\n Height \n | \n
\n\n| \n Slide size \n | \n\n 720 pixels \n | \n\n 405 pixels \n | \n
\n\n| \n Player frame \n | \n\n +20 pixels \n | \n\n +20 pixels \n | \n
\n\n| \n Navigation buttons \n | \n | \n\n +51 pixels \n | \n
\n\n| \n Sidebar \n | \n\n +240 pixels \n | \n | \n
\n\n| \n Published Course Dimensions \n | \n\n 980 pixels \n | \n\n 476 pixels \n | \n
\n\n
\n
Saving Player Changes
\n
When you click OK to close the Player Properties window, Storyline saves your changes in the current project file.
\n
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.
\n
To learn more about the Current Player options, see this user guide.
\n
You Might Also Want to Explore:
\n
Interactive Demo: Which Player Properties Are Supported in the Responsive Player?