full screen video button?

Indrani,

Please see my summary of this issue here.

Hi Cathy,

Currently I have this code, but still does not use display as full screen within a LMS.

<iframe src="https://player.vimeo.com/video/202111322" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Any ideas as how I can do things differently?

Thanks,

Indrani

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.

Working around Vimeo's big change is a significant rewrite to the way we publish LMS output. Assuming that it's technically feasible, we'll also apply the update to Storyline 3 when it is released later this year. Our next update to Storyline 2 isn't scheduled yet, but once it is we'll evaluate the possibility of getting this new functionality there as well. 

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

Thanks Ashly! I'm going to have a look :)

Great to hear you are conquering this!

Unfortunately it doesn't appear to work with Brightcove videos.  Here is an example:

https://360.articulate.com/review/content/92e293e8-cc24-49d7-89a3-684f911259ec/review

web object code is: http://players.brightcove.net/70829860001/default_default/index.html?videoId=5145174631001

Does it work with your own created HTML5 web objects with video tag player?

Hi Will,

Thanks for sharing the link - I think it's just within Articulate Review that the full screen button isn't going to work, as I looked at publishing for Web and placing on Tempshare here, and that worked in Chrome with HTML5 first. Also, I had to insert it as a web object since it wasn't the embed code, but a link to the video itself. Let me know if you've got the embed code to share and happy to give that one a try too! 

It looks like that web objects (Iframe) are now all allowed to have a full-screen button.
I tested this with a HTML5 video player and it works on IE, FF and Chrome.
I'm going to test this on an LMS enviroment also this week. I expect this to work.

If it doenst work, then that is because of the coding of Youtube, Vimeo or Brightcove etc.
Not because of Articulate.

As you can see below, SL360 output (and maybe als SL2 update and SL3 also soon) have the fullscreen attributes allowed now. Do I say this correctly Ashley?

SL2 (2.7) output (story.js)

// Create the iframe
var oIFrame = document.createElement('iframe');
oIFrame.frameBorder = "0";
oIFrame.id = "div" + strId;
oIFrame.style.border = "0";
oIFrame.style.width = "100%";
oIFrame.style.height = "100%";
oIFrame.allowtransparency = "true"; 

SL360 (3.4) output (story.js)

// Create the iframe
var oIFrame = document.createElement('iframe');
oIFrame.frameBorder = "0";
oIFrame.id = "div" + strId;
oIFrame.style.border = "0";
oIFrame.style.width = "100%";
oIFrame.style.height = "100%";
oIFrame.allowtransparency = "true";
oIFrame.setAttribute('allowFullScreen', '');
oIFrame.setAttribute('webkitallowFullScreen', '');
oIFrame.setAttribute('mozallowFullScreen', '');

For the ones that are still working with SL2, there is a work around for this. You can force these attributes to be added with coding. This is being explained earlier in this thread.

I do want to point out something to Articulate.
When reviewing the test course online with the SL360 online review option, the full-screen button was not present anymore. So I guess the Iframe there (which loads the content) is still not allowing the full-screen attributes.

Unfortunately our LMS (Cornerstone) must be built similarly to Articulate Review. As I you can see in this Peek video, I have the same issue where Brightcove's full screen button doesn't work when I test it in Cornerstone. My theory  is that there is a parent iframe tag somewhere that Cornerstone/Articulate Review uses to encapsulate the Storyline file that doesn't have the fullscreen properties included. So probably this is the LMS's fault at this point.

Here is the Brightcove Embed code that Storyline recognizes if you use Insert > Video > Video from website and what it looks like in Articulate Review... 

<iframe src="//players.brightcove.net/70829860001/ryl2y1unFe_default/index.html?videoId=5145174631001" 
allowfullscreen 
webkitallowfullscreen 
mozallowfullscreen 
style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></iframe>

I've trimmed this down from the full embed code Brightcove gives you because it includes some divs that make the video look strange. Here is the full embed code Brightcove supplies, with additional formatting divs:

<div style="display: block; position: relative; max-width: 720px;"><div style="padding-top: 56.25%;"><iframe src="//players.brightcove.net/70829860001/ryl2y1unFe_default/index.html?videoId=5145174631001" 
allowfullscreen 
webkitallowfullscreen 
mozallowfullscreen 
style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></iframe></div></div>

 [Update: I found out why it made the video look strange - I had inserted the video on top of another copy of the video by accident - the full Brightcove code trims off the top and bottom of the video, so I would still use only the iFrame tag which is bolded above.]

I think it is probably not the fault of YouTube, Vimeo, or Brightcove's coding at this point, but more likely the fault of the LMS (or Articulate Review) for not also including the fullscreen attributes in a parent iframe.

Hi Will,

You can try to add the code below in the HEAD section of the loaded content. It will add those attributes to the parent Iframe. This worked for me while using SL2.
I will test the SL360 output on a Xyleme server soon and see if that works (out of the box). When it doesnt, I will also try something like this maybe.

<script type="text/javascript">
 //adding these attrributes allows the browser to use full-screen
 var frameEl = window.frameElement;
 if (frameEl) {
  window.frameElement.setAttribute("allowFullScreen", "allowFullScreen");
  window.frameElement.setAttribute("webkitAllowFullScreen", "webkitAllowFullScreen");
  window.frameElement.setAttribute("mozAllowFullScreen", "mozAllowFullScreen");
  window.frameElement.setAttribute("sandbox", "allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation");
}
</script>

I agree. I had the same issue. Nothing to do with Articulate. Our LMS did not allow it :(

Hi Paul,

Thanks for that tip. Unfortunately I couldn't get it to fix the issue - I think the problem is that what needs to change are the iframe attributes of the parent iframe, which is controlled by the LMS. 

Here is what I think describes this issue well:

http://stackoverflow.com/questions/14209487/nested-iframe-not-going-fullscreen

Or at least kind of explains the issue.

Here is a better explanation:

http://stackoverflow.com/a/14153708

Hi Will,

I see :(. Too bad something as simple as a full-screen function should be such a hassle.
To be continued ;) ...

Yeah, I'm glad Articulate is at least making sure it works on their end. Now if I could just get the same kind of attention on the CSOD forums...

Good News! I did find a way to make this work in our LMS now (Cornerstone). You have to change a Storyline player option before publishing:

In Storyline go to:

• Player > Properties > Custom > Other (the gear icon) > Browser Settings >
• Add checkmark in "Launch player in a new window (creates launch page)."
• Add checkmark in "Display window with no browser controls"

This does mean that when the user launches the course, there will be not one, but two pop-up windows (it adds an intermediary window with that old familiar orange Launch button that you don't have to click, and then opens the course window on top of that), but hey, it works!!! And when you close the course, it courteously closes the extra window for you. I think I can live with that.

Haha nice find! :)

Thanks Will for sharing that Cornerstone update - and I hope if folks figure it out in other LMSs they'll be able to share here as well! 

paste this in your story_html5.html for working fullscreen in web-element players

<script type="text/javascript">
(function () {
var attributes = ["allowfullscreen", "webkitallowfullscreen", "mozallowfullscreen", "oallowfullscreen", "msallowfullscreen"];
function forceIframeFullScreenToWork () {
var elements = document.getElementsByTagName("iframe");
for(var i =0; i < elements.length; i++) {
attributes.forEach(function (attribute) {
elements[i].setAttribute(attribute, true);
})
}
}
var interval = setInterval(forceIframeFullScreenToWork, 500);
forceIframeFullScreenToWork();
}());
</script>

I am new to Articulate/Storyline, however as a Video Producer, would certainly like to add my voice to those who would like to see full-screen support for MP4s.  Thank you.

Thanks Dia for adding to this discussion and we'll keep folks posted about any shift or change in this behavior. Please also know that you can also always submit feature requests here by filling out this form.

Hi . . . also experiencing this issue. Adding a comment to keep abreast of any updates.

Thanks,

Craig