How to Activate the Full Screen Toggle Button from External Video Players

Embedded external video players (Vimeo, etc.) are stripped of their full-screen toggle button when published from Storyline 360 to HTML5 using the Video-from-Website or Web-Object-in-Slide techniques. Launching a web object in a new window does provide full-screen toggle control, but is not a viable option in cases, such as ours, where Javascript is needed inside the video player to set SL variables .

The source problem appears to be that the containing published iframe (src="story_content/…html) does not insert the allowfullscreen attributes during publishing. I imagine the developers have good reasons for this, but as others have pointed out, it makes some video-heavy courseware impractical (such as when instructional videos provide fine detail), and adds 10 years to the look and feel of the course.

This problem was addressed at length here.  The summary solution by George Champlin was to insert the allowfullscreen attributes in: 1) player.js, and 2) player_compiled.js within the Storyline program files.

Regarding 1) player.js: After this work-around was provided by George in May 2016, Articulate appears to have added them to player.js in Storyline 360 January 2017. (My assumption is that this solution only provides the full screen toggle in the Flash player. )

Regarding 2) player_compiled.js: I am evaluating Storyline 360 and there doesn't appear to be any player_compiled.js file available to modify. My assumption is that app.min.js has subsumed this functionality but I can find no similar references in app.min.js as outlined here by George for player_compiled.js:

"This is the function that creates the iframe for html5 content, it's around line 919. Add the three lines at the bottom:"

WebObject.prototype.createRef=function(){if(this.ref||!this.createBaseRef())return!1;this.contentRef=$("<iframe class='item webobject unhideable'></iframe>");this.contentRef.attr("width",this.width);this.contentRef.attr("height",this.height);

this.contentRef.attr("allowfullscreen",'');
this.contentRef.attr("webkitallowfullscreen",'');
this.contentRef.attr("mozallowfullscreen",'');

So the code framework has changed. (No doubt for the better: the Articulate developers appear to be excellent—what a well-designed program! ) Consequently, I'm hoping some brave and brilliant soul may offer some solution to this full screen video toggle problem. This will likely make the difference as to whether we go the Storyline route or not.

13 Replies
Justin Grenier

Hey, Rob.

I wanted to let you know that we do indeed intend to add the ability for embedded videos to play full-screen in an LMS within our HTML5 output.  This was something we had hoped to add to the January update you mentioned, but we were only able to squeeze the Flash fix out at that time, and we felt that incremental improvement would be a plus.

Please note that this fix (and the fix for Flash as well) will likely only help with LMSes that launch content in a new window.  We'll still need to rely on LMS vendors to propagate the fullscreen attributes to the top window when launched in a frame.

We'll keep this forum thread updated as we make progress, and thanks for weighing in!

Ben Sewell

I understand you are talking about embedded video players, but are you able to provide an external hyperlink to the video as a workaround? Not ideal I understand, but this may well just be a case of wait for the official feature addition by Articulate.

Is this helpful?

https://vimeo.com/forums/api/topic:277283 

Justin Grenier

Sure thing, Rob.  I'm referring to when an LMS launches the course in a new window.

The original problem was due to Storyline not propagating the full screen attributes to the parent frame.  Even if we fix the problem entirely on our end, you'll be in the same boat if you launch your Storyline course in a frame and the LMS doesn't propagate the same attributes to their parent frame.

Ashley Terwilliger

Hi all,

Great news! Articulate 360 Update 4  was just released, and included a number of fixes and enhancements which you can see in the release notes available here.  The item you all may be particularly interested in is how we fixed various issues when editing videos in Storyline 360 and viewing videos in published output, which should allow videos (such as Vimeo) to have the full screen button within an LMS such as SCORM Cloud.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.