Explore the community Forums Lectora Lectora Questions & Answers YouTube full screen button not showing in LMS

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #322029 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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?

    #322037 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    338 pts
    @ssneg

    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.
    #322193 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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.

    #322215 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    338 pts
    @ssneg

    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.
    #322235 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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

    #322272 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    338 pts
    @ssneg

    Interesting. Is there any way to take a peek (as a student) into the course hosted your LMS?

    #322273 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    108 pts
    @jvalley4735

    Following

    #322304 Score: 0
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    8 pts
    @nwilliams3743

    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.

     

     

     

     

    #322307 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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 🙁

    #325145 Score: 0
    Profile photo of Vicki
    Vicki
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    picture perfect
    3 pts
    @Vicki

    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!

    #325271 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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.

    #325316 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    108 pts
    @jvalley4735

    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

    #325358 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

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

    #325397 Score: 1
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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.
    #359285 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @mmilo9281

    hi, can you help me, i did it in the same way but it dont works.

    greetings and thx, Marcel

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.