Full Screen video option in Articulate Storyline

Jul 22, 2015

I'm precisely stating my query-

Video controls in Articulate storyline are "seekbar" and "volume control" option. NO FULL SCREEN control option.

Can any one figure out a way to full screen video controls ??


12 Replies
Chad Keller

The Storyline (flash) video player doesn't have an option to enter full screen mode.  However, if you publish for html5, you can alter the /mobile/player.css file to make the full screen button show up. If you remove the bold text, the html5 video player will be able to enter full screen.  

On or near line 687 of "[your output folder]/mobile/player.css.  

video::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-mute-button

Since this is a custom change after you publish, you will need to make sure that you make the change every time you publish. (or at the very least, before you hand off the finished product)

Dan Marigot

Geez, a simple trigger that allows for full screen seems like a decade old request. I know you want to have "Heros" do all the lifting but c'mon! Hire the guys in India to do it for you or something! That "Submit a Feature Request" doesn't even work! Only new features you really added were things any mid-level developer can do.

Michael Anderson

You can make videos go full screen if you embed another video player such as VideoJS player. You might be able to create a button to make the browser enter full screen mode, Follow the discussion here. https://community.articulate.com/discussions/articulate-storyline/course-in-full-screen?page=2

Specifically my post with this code:

var fullStorylinePlayer = document.querySelectorAll("html");
if (fullStorylinePlayer[0].requestFullscreen) {
}else if (fullStorylinePlayer[0].mozRequestFullScreen) {
fullStorylinePlayer[0].mozRequestFullScreen(); // Firefox
}else if (fullStorylinePlayer[0].webkitRequestFullscreen) {
fullStorylinePlayer[0].webkitRequestFullscreen(); // Chrome and Safari
}else if (fullStorylinePlayer[0].msRequestFullscreen) {
fullStorylinePlayer[0].msRequestFullscreen(); // IE

Let me know if you need any help with this.

Tsvety Pendeva

Thank you, Michael for your demo link and example Storyline file! Unfortunately, although the link on your website behaves as expected if I just Publish the supplied .story file, the code behind it no longer works. :( None of the defined variables ever change - they all stay as "false" and "0", and double-clicking the video wouldn't hide the "Double click..." button on the bottom. I would guess, this is caused by resent updates of Storyline360.

Luciana Piazza

Hello, everyone. 

I have exciting news to share!

We have just released another update for Storyline 360. In Update 67, we've included important fixes and features. 

One of the features we've included is: 

Adding a player toggle to let learners view courses in full-screen mode.

To take advantage of this feature, launch the Articulate 360 desktop app on your computer and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let us know if you have any questions by posting here or by reaching out to our Support Engineers directly.

Have a great day!