Embedded video will not expand to full screen in LMS

Sep 07, 2017

when trying to make the embedded replay video (made in replay) full screen by pressing [] on the video bar in Rise, it does not work once uploaded into LMS.

 

see attachment

70 Replies
Will Findlay

Here is how I described it to my LMS vendors (who, to their credit, fixed it for SCORM 2004 courses 4 years later) [2023 UPDATE: And fixed it in SCORM 1.2 last year, Go Cornerstone!] :

I have run into an issue where I have a course with an embedded video on a page that should have the capability to be shown full screen. However, clicking the button does not work. If I upload the course to a generic web server, the user can click the full screen button and it works without a hitch. 

I think the problem is that online courses are displayed in an iframe by the LMS and that iframe does not have the allowfullscreen parameters included.  All that needs to be fixed is to change this code below (in the page that launches online courses) from this:

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."></iframe>

to something like this

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."

allowfullscreen 
webkitallowfullscreen 
mozallowfullscreen

></iframe>

Marianna Schepputat

Hi there, 

we could not solve the problem yet and still hope for a solution by Articulate. @Articulate team: will there be a solution for this in the near future?  Is there any workaround to publish courses with video in the lms or information or guidance we can pass on to our LMS provider? 

Thank you!

 

Alyssa Gomez

Hi Marianna! I'm sorry the video block's fullscreen button doesn't work in your LMS. Since this is an LMS-related issue, you'll want to work with your LMS's support team for next steps. Perhaps you can share what Will outlined above with that team:

I have run into an issue where I have a course with an embedded video on a page that should have the capability to be shown full screen. However, clicking the button does not work. If I upload the course to a generic web server, the user can click the full screen button and it works without a hitch. 

I think the problem is that online courses are displayed in an iframe by the LMS and that iframe does not have the allowfullscreen parameters included.  All that needs to be fixed is to change this code below (in the page that launches online courses) from this:

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."></iframe>

to something like this

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."

allowfullscreen 
webkitallowfullscreen 
mozallowfullscreen

></iframe>

Will Findlay

The SCORM architecture used by LMSs relies on iframes. When you launch a SCORM course, it usually opens a standard HTML page that contains an iframe that contains your course. By default web browsers no longer allow videos to go full screen when inside an iframe. So this is why the LMS developer must add code to allow this.

Probably in the past this additional code wasn't a requirement, so it wasn't in the LMS's original code. Just some theories, but I think LMS developers are hesitant to change code that will affect every SCORM course in their system. So it may take some convincing to get them to make the necessary changes. Another theory: Fullscreen mode can also be abused for phishing attacks, so maybe they are worried about liability. Of course, it all depends on the LMS you are using and how much they are willing to change things.

Here is another resource that you might share with your LMS vendor to suggest a fix:

https://stackoverflow.com/questions/27723423/youtube-iframe-embed-full-screen

 

Andrew McGuffee

Many thanks Will!

I will pass this along to our LMS Dev team but chances are they will not bite. Unfortunately the only other workaround I came up with is putting our mp4s inside a Storyline Block and then having that launch in a separate browser but that's not ideal either (and picture clarity is not the best). Either way, thanks again for all the insight I learned a lot today!

Will Findlay

I don't think it will make a difference. But to be 100% sure it might be worth testing. The reason I don't think it makes a difference is that in both cases the content is embedded in a player. Even if you upload the MP4, it needs an embedded player to show on the page.

Here is how I think it works:

  1. Your LMS launches the page that contains your course in a parent iframe.
  2. You navigate to a page in your Rise course that contains an enbedded video player
  3. A smart video player begins loading on the page, discovers it is in a parent iframe,  checks to see if all the iframes it is inside allow for full screen, and if so enables the fullscreen button.
  4. A dumb video player just shows the fullscreen button regardless. Then when the user clicks on it, the browser checks to see if the iframe(s) it is in allow full screen and complies with the request or vetos the request if an iframe doesn't explicitly allow it.

 

Will Findlay

A sidenote, but if you are beginning to hate them and wonder why SCORM courses use iframes this is worth noting: https://stackoverflow.com/questions/31201943/are-iframes-still-a-necessity-in-a-tracking-scorm-sco/31217293#31217293

- An answer by Philip Hutchison, aka, Pipwerks, who created a Do-it-yourself SCORM wrapper that I've used a few times with great success.

Will Findlay

One last thing to try... I discovered by accident one day that our LMS now also supports uploading xAPI packages in addition to SCORM packages. You might try exporting as xAPI instead of SCORM and seeing if your LMS will accept the format? Long shot maybe.

Update: You will want to make sure the reporting you need still works the way you expect if you switch to xAPI instead of SCORM.

Andrew McGuffee

Hi Will,

Great minds must think alike because I recommended this today as well 😉.

Looks like it is an issue with the wrapping of the video itself as Articulate has pointed out and will probably have to be adjusted by LMS Dev Team. Would be nice if we could select common wrapping packages when publishing that could for account for stuff like this. Thanks again for all your knowledge and support on this!

John Yumul

Hi everyone, I was in the same boat trying to get the full screen button to work and we were able to get it to work only if:

  1. Using Chrome
  2. Must be in Incognito mode
  3. The course must be launched in another window
  4. Course must be exported using SCORM 2004 4th edition

 

However, for our needs this was too cumbersome and so we tried to find another solution.  We discovered another workaround that might work for some of you.  We were playing around with the cookie settings in Chrome and it turns out that when we enabled the setting "Block third-party cookies", the full screen button worked perfectly!  For those unfamiliar with how to find the setting, I took a screenshot.  To navigate to the setting:

  1. Go to Chrome Settings
  2. Select "Privacy and security"
  3. Select "Cookies and other site data"

We then verified that the course launched and was properly tracked by our LMS and that the full screen button worked.  Just wanted to share this with everyone, hope this helps!

 

3rd party cookie screenshot

Operations Department

Hello,

Looks like this issue started over 6 years ago and it's still an issue. When I embed videos (Vimeo or other) within Articulate when select Preview in Rise, a user is able to expand the video. However, once it is published (scorm 1.2) into our LMS, the feature is removed and you are not able to expand videos. This is a concern for accessibility and supporting people who may have vision challenges.

Has there been any resolution Articulate? 

Thanks,

Sarah

Jessie Chen
Alyssa Gomez

Hi Marianna! I'm sorry the video block's fullscreen button doesn't work in your LMS. Since this is an LMS-related issue, you'll want to work with your LMS's support team for next steps. Perhaps you can share what Will outlined above with that team:

I have run into an issue where I have a course with an embedded video on a page that should have the capability to be shown full screen. However, clicking the button does not work. If I upload the course to a generic web server, the user can click the full screen button and it works without a hitch. 

I think the problem is that online courses are displayed in an iframe by the LMS and that iframe does not have the allowfullscreen parameters included.  All that needs to be fixed is to change this code below (in the page that launches online courses) from this:

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."></iframe>

to something like this

<iframe id="activityFrame" title="Activity" frameborder="0" style="width:100%" src="/content/..."

allowfullscreen 
webkitallowfullscreen 
mozallowfullscreen

></iframe>

This worked for Canvas! Thank you so much. This saved my life!