I often face situations where the course(s) are embedded into a page and get frequent requests to enable a full-screen option for the embedded content. Articulate Storyline does not have a built-in full-screen option when the course plays in an iframe, or at an optimal size.
Step by Step:
- Download the Github package from https://github.com/sindresorhus/screenfull.js/
- Extract the package to a folder (let’s name it as ‘full-screen’) and open the file index.html in a code editor (I prefer Notepad++ or Sublime)
- Remove the highlighted lines as displayed in the screenshot below.
- Why? We are trying to embed the full-screen enabled iframe of our e-learning course into this page. For this, we are removing all the unnecessary content and just place our custom iframe.
- Now put the following code at the beginning of the <body> in the html file.
<iframe id="container" src="<your course URL>" height="300" width="550" scrolling="no"></iframe> <br> <button id="toggle">Toggle</button>
What does this do? The webpage creates an iframe for with specified height and width. It applies the “container” class features to the iframe (full-screen function). The button then activates the feature.
Why use scrolling=”no” in the iframe? Sometimes when you toggle the e-learning window from full-screen back into the iframe, it displays scroll bars. This function will suppress that behavior.
- Upload the full-screen folder to your website. If everything goes as per the plan it will look something like this.