176 Replies
Ashley Terwilliger

Hi Indrani,

The first embed code you shared is a Vimeo video that is set to private, so it can only play on the Vimeo website. For the second one, I was able to insert it into Storyline but it didn't include the full screen button. I'll defer to Nitesh for his expertise on adding the additional Javascript coding that would allow the video to play full screen in those browsers as it's not something that I can offer support for. 

Indrani Sen

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

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.

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.

Will Findlay
Ashley Terwilliger

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! 

Paul Wijnen

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.

 

Will Findlay

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.]

Paul Wijnen

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>

Will Findlay

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.

Will Findlay

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.

allan dalgaard

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>