How to Activate the Full Screen Toggle Button from External Video Players
Feb 06, 2017
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
What a well written write up Rob - I hope that someone in the community is able to assist you with this here, as it's well outside my expertise! I'll be following along though so that we can reference this in future.
Thank you, Ashley. I will definitely read this article, and let you know if I can resolve this issue.
Thanks,
Certainly keep us posted Indrani!
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!
Thank you. Please keep us posted.
Best
Indrani
Thank you Justin.
When you say the solution will likely only help when an LMS launches content in a new window are you referring to the course launch or some other content launch?
I would say wait until Articulate add it as any method created as a stopgap now is likely to be deprecated once they get this working.
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
Thanks for bringing this up. I have also been waiting for this functionality. As a workaround (for videos with fine detail), I have resorted to downloading and reauthoring with pan and zoom. Not an elegant or time-saving solution. Happy that an official solution is on the way.
Yes! Very encouraging to know that feature is on its way.
With luck it'll be released soon so you don't have to come up with a workaround that makes your maintenance more complex.
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.
Justin - Got it. Thanks.
Phil, Jackie - Thanks, looks like I'll have to wait.
Ben- Thanks , but no, this won't help, I need to set variables via video player to SL.
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.