Full Screen video option in Articulate Storyline

Hi Jayant!

I'll leave it to the community to offer suggestions on creating it a "full screen" video within Storyline, as we don't have a feature that would do so. You can always submit that as a request though. 

Hi Leslie/Jayant,

I too have the same requirement.  But Articulate's tutorial videos always play at full screen.  What is the secret.  :-)

Thanks.

John.

Hi John!

What videos are you referring to as I know many are YouTube videos and that is where the option lies. 

Your video options are explained in this tutorial.

I just want to be sure I'm understanding the request.

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
{
  display:none;
}

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)

Glad that Chad was able to assist you John.

I just wanted to mention that replying to the forums via e-mail attaches your signature, but you are welcome to pop in and edit if needed.

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.

Bonjour , toujours pas de fonction ou déclencheur plein écran pour des vidéos ?

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) {
 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.

Can't believe that Articulate havn't given us this option yet - yes I have requested. We shouldn't have to do work arounds to make a video go Full Screen!

Here's a demo showing the use of the VideoJS player, which allows you to display full screen video in your course. http://andersonelearning.com/demo/VideoJS_Demo_v1.1/story.html

I've attached a sample story file too.

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.

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!