Explore the community › Forums › Lectora › Lectora Questions & Answers › YouTube full screen button not showing in LMS
Tagged: fullscreen, youtube
-
AuthorPosts
-
I’m using Lectora 16.2 and I have a HTML object which contains IFRAME HTML to embed a YouTube video. The HTML includes the appropriate attributes to allow the “full screen” button to appear. This works as expected when I HTML preview and when I HTML publish but when the title is SCORM published and loaded onto an LMS the “full screen” button is disabled.
The button is disabled in IE, Chrome and Firefox.
When I examine the published HTML everything looks correct.
What do I need to do to get a YouTube video’s “full screen” button enabled when the title is SCORM published and running in an LMS?
YouTube player requires every iframe that contains the player to include the “allowfullscreen” parameter. That includes the iframe that your LMS launches the course in. If it does not include that parameter, YouTube will not display the fullscreen button.
This post has received 1 vote up.Thanks for that but could you please provide more detail as I can’t get the full screen button to enable.
A search of the published output only turned up the IFRAME that contained the video (which did have the allowfullscreen attribute).
I added allowfullscreen as an attribute to all the frames in a001index.html and it made no difference.
I am pretty sure your LMS wraps Lectora content into an iframe of its own. So regardless of how many places you add allowfullscreen to in Lectora, the fullscreen button won’t work until your LMS changes the way it wraps SCORM content. At least this is usually what is going on in cases like this. To confirm, launch the course from the LMS and inspect for any iframes that your LMS creates.
This post has received 1 vote up.An error/warning that the LMS gives that is probably relevant is:
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://127.0.0.1:8080’).
The funny thing if I create a SCO with a different tool then the full screen button is enabled.
At any rate as I have no access to whatever HTML the LMS generates to display content I guess that mean the button cannot ever be active
Interesting. Is there any way to take a peek (as a student) into the course hosted your LMS?
Following
I had the same issue, and Sergey is correct.
The LMS loads my scorm file as an iFrame, and the scorm file contains it’s own iFrames (videos)
My video (Vimeo) would not display the full screen button unless I add the allowfullscreen line in myself.
Attachments:
Ok, thanks for the info but could you tell where you added “allowfullscreen”?
Are they screen captures of some screen in your LMS? I have no access to whatever HTML the LMS generates to display the title and I doubt the client would be happy for anyone to edit files in the LMS.
It looks like I’m snookered 🙁
I am experiencing the same problem when embedding videos from Vimeo. The code to allow full screen is in my External HTML object, but when it is published to ReviewLink, the code has changed to not allow full screen. When I inspect the element in ReviewLink, I have the following code:
<iframe src=”https://…” webkitallowfullscreen=”” mozallowfullscreen”” allowfullscreen=”” frameborder=”1″ height=”366″ width=”650″>
Then, a few lines later as subscript of the above:
<div id=”player” class=”player player-931cc49d-1620-409d-82d5-c29c6a43add1 js-player-fullscreen with-fullscreen with-sticky-custom-logo no-fullscreen-support”><div class=”video-wrapper”>
So, I have no clue if this is a programmer (me) issue, a Lectora issue, or a ReviewLink issue.
Thanks!
I’m 99.9% sure it’s a Lectora issue.
When I SCORM publish (with the “LMS opens the course in a new window” option checked) from v.16 it creates an index html file that includes a FRAMESET with two FRAMES.
First, FRAMES are not valid HTML5 and, secondly, I needed to manually edit the index file to allow full screen video by replacing the FRAMESET with IFRAMES. It’s a PITA because there’s no template file to edit so I need to edit the page every time I publish a title.
I was able to find this issue because it had been reported previously. The development team included a fix in the latest version of Lectora 16.2.2 (came out yesterday). Can someone on this thread let me know if the issue is resolved once Lectora is on the latest version?
http://trivantis.com/inspire-e-learning-software/release-notes-16-2-2
I’ve just installed 16.2.2 and I can confirm that full screen YouTube and Vimeo video does NOT work (I have SCORM 1.2 published the title).
I 99.999% believe the issue is a Lectora one.
The index.html file that Lectora 16.2.2 generates is a HTML5 file (it has the doc type <!DOCTYPE html>).
In HTML5, the FRAMESET and FRAME elements are obsolete are should not be used. See:
https://www.w3.org/TR/html5/obsolete.html#non-conforming-features
The Lectora generated index.html file includes FRAMESET and FRAME???
In my research, full screen video cannot be active until: FRAMESET and FRAME are replaced with IFRAMES with the attribute “allowfullscreen” (plus some appropriate CSS).
The guys at SCORM.COM helped me out with this workaround:
LMS publish the title and locate the …index.html file
Open it with a text editor and at the bottom you should see
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame title="Title 1" name="titlemgrframe" src="a001titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame title="Title 1" name="contentframe" src="a001content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>The “title” and “src” values above will vary depending on what was set within your Lectora title.
Change it to this:
<body style="margin:0;">
<iframe name="titlemgrframe" src="a001titlemgr.html" style="position:absolute; border:none;">
</iframe>
<iframe name="contentframe" src="a001content.html" allowfullscreen="true" style="display:block; position:absolute; border:none; width:100vw; height:100vh;">
</iframe>
<body>
</html>That’s it! Now save and close the file.
In an LMS published title in which the LMS launches the title in a new window the full screen button will be active on YouTube/Vimeo videos.
This post has received 1 vote up.hi, can you help me, i did it in the same way but it dont works.
greetings and thx, Marcel
-
AuthorPosts
You must be logged in to reply to this topic.