Skip to content

Articulate Storyline: Ensuring Hassle-free Display of Videos in E-learning Courses

Using videos in eLearning courses not only keeps learners engaged, but also enables them to remember the content easily.Many industry experts recommend using videos in online courses to enhance their effectiveness. However, we face aproblem when we use videos directly in our courses’ slides.

Problem:

The dimensions of videos should be adjusted based on the dimensions of the GUI (Interface). This may affect the viewing experiences, if there are minute objects or animations in the video.

Solution:

In order to display the video better, the video needs to be opened in a new browser window so that we can set our own dimensions as per our requirement.

In this post, I would like to share how to open a video in a new browser window from an eLearning course developed in Articulate Storyline. No knowledge ofHTML or JavaScript is required. Follow the steps below and use the code snippet I have provided.

Step 1:

Design your slides with the content.

Step 1

Step 2:

Develop anHTML page,and add your videotoit.Refer to the screenshot and code below.

Step 2

Note 1: Adjust the height and width values in the above code as per your requirement.

Step 2 - Note 1

Note 2: You can even make the video play automatically by adding the word ‘autoplay’ to your <video> tag.

Eg: <video width=”400″ height=”250″ autoplay>…</video>

Step 2 - Note 2

Step 3: 

Add a button/object in your slide. On clicking it, your video needs to open.

Step 3

Step 4:

Add a trigger to execute the JavaScript code when the learner clicks the button, and add the code below.

window.open(“your_path/video.html”, “_blank”, “toolbar=0, scrollbars=yes, status=0, resizable=yes, top=200, left=200, width=400, height=300”);

Step 4

Step 5:

Publish your course,and check the output. The video with of the required size will open in a separate browser window as shown in the screenshot below.

Step 5

In this way, you can display your video in a browser using Articulate Storyline.

Note: All your video, html file and .story file may be placed in the same folder to avoid complications as shown in the screenshot below.

Step 5

Hope you find this post useful. Do share your thoughts.

Authoring Tool Finder - Find the Best Suited Authoring Tool for Your Needs