Vimeo in articulate storyline 2

Hi, we are investigating uploading all of our training videos to Vimeo (because of the extra privacy settings - we prefer vimeo to youtube), then embedding them into our storyline training courses.

I've just tried it and had several issues.

The videos wouldn't work unless I ran the html5 version of the course.

The videos would play ok in html 5 but the fullscreen button is gone, even though I put all of the right embed code options in.

I've watched the articulate support screen cast about and have read the forums on this and apparently its a know issue. Has anyone found an easy answer to this?

David.

23 Replies
Ashley Terwilliger

Hi David,

When you embed videos from websites, such as YouTube and Vimeo, in your Articulate content, you may find the fullscreen button is either missing or not working in your published output.

This is a known issue. For security reasons, many web browsers are now restricting fullscreen mode for embedded iframe content.

We can't override browser security restrictions; however, you can enable fullscreen mode (or full-browser mode) by configuring web videos and web objects in your Articulate content to open in a separate window.

David Mitchell

How do you configure that? Is it in storyline or in the embed code?

My fullscreen flags look ok when I paste them in from Vimeo.

David

*******************************************************************************
This e-mail is intended for the use of the addressee only. It may contain information that is protected by legislated confidentiality and/or is legally privileged. If you are not the intended recipient you are prohibited from disseminating, distributing or copying this e-mail.

Any opinion expressed in this e-mail may not necessarily be that of ReturnToWorkSA. Although precautions have been taken, the sender cannot warrant that this e-mail or any files transmitted with it are free of viruses or any other defect.

If you have received this e-mail in error, please notify the sender immediately by return e-mail and destroy the original e-mail and any copies.
*******************************************************************************

David Mitchell

I still seem to have a problem though because my users have different devices and screen resolutions.

The big advantage of using Vimeo is that once you go full screen, the video scales to their screen. Will storyline do the same?

David.

*******************************************************************************
This e-mail is intended for the use of the addressee only. It may contain information that is protected by legislated confidentiality and/or is legally privileged. If you are not the intended recipient you are prohibited from disseminating, distributing or copying this e-mail.

Any opinion expressed in this e-mail may not necessarily be that of ReturnToWorkSA. Although precautions have been taken, the sender cannot warrant that this e-mail or any files transmitted with it are free of viruses or any other defect.

If you have received this e-mail in error, please notify the sender immediately by return e-mail and destroy the original e-mail and any copies.
*******************************************************************************

Ashley Terwilliger

Hi David,

Storyline does not have a full screen option for the player or videos embedded on a slide. Perhaps if you need it to go full screen knowing that they'll be viewing on a number of different devices you could also look at adding it to open in a new window, and that would likely allow for the normal video controls to work and have the user view it at a full screen per their device. 

If they're accessing it on an iPhone with mobile safari, it's the default behavior of the browser/device to go full screen here. 

Bill Kelleher

Hey David,

I use Vimeo as my video host, and I was able to piece together this solution:

Use a screenshot of the video as a placeholder and open in a new window

Use a Jump to File trigger on the screenshot and have the link be the embed code (not just the URL, but the full embed code URL including player.vimeo) and set the browser properties to Display in New Browser, No browser controls, Full Screen.

Trigger Details

This opens up the file in a pop-up window. Granted, I wanted my functionality to operate like this because it is part of a branching course, but it does work well.

 

Ashley Terwilliger

Hi all,

I wanted to provide an update here, as Storyline 2 Update 10 was just released, and included a number of fixes which you can see in the release notes available here. The item you all may be particularly interested in is how it fixed issue where embedded Vimeo videos do not have a full screen option, You can download the latest update here, and after downloading and installing the latest update you’ll want to republish any existing content to ensure that the updates and fixes are applied.

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

Ashley Terwilliger

Hi Bill,

It looks like you shared the published output and I'd want to see the .story file in terms of how you added in the video and other options. I do know there was an issue with web object videos using the http:// vs. SCORM Cloud using the https:// and therefore SCORM Cloud wouldn't play them as normal. You could also look at testing in a web server to see if there is a different behavior and there are a few that you could look at utilizing here. 

Bill Kelleher

Sorry about that, attaching the .story file.

I did test it out on the web using dropbox and that did work (https://dl.dropboxusercontent.com/u/112921964/test/story.html for reference). 

Is it possible that this different playback in the SCORM content is related to specific websites like SCORM Cloud, or to SCORM content on an LMS in general? I feel like most LMSs have secured connections that seem to be preventing this.

 

Ashley Terwilliger

Hi Bill,

Thanks for sharing your file. I took a look and also uploaded it to my Articulate Online account for testing, you'll find that one here. I also upload to SCORM Cloud here.

The Articulate online one does work for me, and allows it to go full screen. It's also worth noting this is only fixed in Flash not HTML5.  The SCORM Cloud link doesn't go full screen but acts like it will with the button missing. I'm going to reach out to a few other team members to confirm what we'd expect here based  on the viewing platform, so I'll be in touch shortly! 

Ashley Terwilliger

Hi Bill,

I just wanted to give you a heads up that our team is still taking a look at this. It seems that based on the frames within SCORM Cloud (and likely your LMS as well) it's blocking the overall full screen feature. They're doing a bit more testing to confirm if that's the case or not, and then we'll be able to update the documentation in regards to how it'll behave when residing in another frame. 

I'll keep you posted! 

Ashley Terwilliger

Hi Bill,

Thanks for your patience on this one. I have gotten a final update from our team that because of the current design of certain LMS systems such as SCORM Cloud, because of the way they embeds our content in a frame set. Our iFrame has the necessary attributes (webkitallowfullscreen, mozallowfullscreen, and allowfullscreen), but the enclosing frame set doesn't. So you'll also see that reflected in our documentation here as well.

Let me know if you have any other questions!  

Bill Kelleher

I don't know if this helps or if it would still be an issue with how SCORM is output in the LMS, but after testing with published output from Storyline 360 (wasn't able to find it in output from SL2), I was able to identify the snippet of code that was preventing the full screen button from working. It is in the iframe that references the html file in story_content containing the actual video.

That iframe does not have the attributes for allowing full screen. Using the browser inspect feature, I was able to edit the HTML locally to add the attributes, and with them added, the full screen button appears and the feature works.

code  

I was able to make this work on two SCORM-Compliant LMSs using 3 video hosting services (Brightcove, Wistia, and Vimeo) and have attached a folder of screenshots of the code as well as output.

I can't tell what's going on with the published output because it appears to be rendered dynamically, but if this is something the publishing side has control of, injecting those attributes into that particular iframe looks like it solves the issue. I'll probably send this over to my LMS's support team as well to see if that render is on their end.

Ashley Terwilliger

Hi All, 

I wanted to provide an update here, as Articulate 360 Update 3 was just released, and included a number of fixes which you can see in the release notes available here. The item you all may be particularly interested in is how it fixed an issue where the fullscreen button was missing from Vimeo videos in Flash output in some LMSs. When you open the 360 Desktop application you’ll be prompted to  download the latest update and after downloading and installing the latest update you’ll want to republish any existing content to ensure that the updates and fixes are applied.

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

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.