Explore the community Forums Lectora Lectora Questions & Answers Vimeo Full Screen issue

Tagged: ,

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #315481 Score: 0
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    9 pts
    @nwilliams3743

    Hi all,

    I’ve had a colleague review a module of mine that is soon to be released.  He mentioned an embedded vimeo video may be too small to view.. I basically told him well that’s what the full screen button is there for, however he stated there was no full screen button.

    I’d tested in preview mode and the full screen button was there, however not in any other area including when loaded to the LMS.  Researching this, as my colleague uses storyline, I noticed they were all having this serious issue and not able to resolve.

    With my Lectora scorm file, I went into the LMS, viewed the iFrame code and added

    webkitallowfullscreen mozallowfullscreen allowfullscreen

    The full screen button works perfectly on the LMS now.

    Two questions

    1. Is there another/easier/less tedious method of going about this instead of adding that extra code for every module with a video in the future?
    2. When viewing a storyline solution, they were throwing around 40 lines of coding to make it work, and on most occasions their feedback was that it didn’t work too well… Is Lectora more advanced in this regard of functionality?  Why wouldn’t they just be able to add the webkitallowfullscreen mozallowfullscreen allowfullscreen line?
    #315626 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
    335 pts
    @ssneg

    In Lectora, you have full control over the code to embed a Vimeo video. Here’s how:
    1. Add an External HTML Object
    2. Copy the embed from from Vimeo page (see below) and paste it into the Object
    3. Edit the code to your liking if need be. It’s just text.

    This is the code that Vimeo generates for embedding videos, by the way:
    <iframe src="https://player.vimeo.com/video/117187158?title=0&byline=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    If you use Web Window object in Lectora (which is equivalent to Web Object in Storyline), the “allowfullscreen” arguments are not added. @support should probably add it to the feature list (they should either be added by default to all iframes generated from Web Windows or toggled with a checkbox in Web Window properties).

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

    I’ve brought it to our developers attention.  Thanks @ssneg!

    #315788 Score: 1
    Profile photo of Trivantis Support
    Trivantis Support
    Moderator
    friend finder
    intermediate
    advanced
    contributor
    junior moderator
    Trivantis Support
    verified member
    profile
    wise owl
    curious george
    19 pts
    @Support

    There are some known issues with Vimeo, Chrome, and the fullscreen button when the embed code is inside an iFrame. Here are a couple threads from their forum that explain it: https://vimeo.com/forums/help/topic:277610https://vimeo.com/forums/help/topic:278181. They suggest you edit the top-level iFrame and any others that appear on the page to add the fullscreen options. In the published Lectora SCORM files you would need to do this in the “a001index.html”.

    This post has received 1 vote up.
    #339193 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    I’ve been having this problem, where I have Vimeo videos embedded into my course, but the full screen icon does not appear when the course is published.

    Each of my videos is inserted into a HTML object in Lectora, and I’ve added the embed code from Vimeo.

    I’ve trawled through all the forum posts and I have a vague understanding, but I still don’t really know exactly what I need to do in Lectora to make it work. Is anyone able to provide a very clear instruction on how to ensure the ‘allow full screen’ code goes into the top level iFrame please?

    Thanks!

    Amanda

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

    You’ll need to insert the following code and change the video link to the one you’re trying to share.
    <iframe src=https://player.vimeo.com/video/137003356 width=500 height=281 frameborder=0 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    #339995 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    Hi Jennifer

    You’ve supplied the Vimeo embed code in the message above, which is exactly what I’ve been using … e.g.

    <iframe src=”https://player.vimeo.com/video/[vimeoID]” width=”1320″ height=”743″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    However, when I publish to HTML or ReviewLink and access the Vimeo videos I’ve embedded into the course, the full screen icon does not appear. There is a fix that I can apply to the index.html file post-publish but I would prefer not to have to do this.

    Regards

    Amanda

    #339999 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    However, the workaround does not work for ReviewLink published content, so the full screen icon is not available at all for my reviewers.

    In addition, this is a separate issue to the full screen icon not working when I publish Offline content.

    So, regardless of the output, it seems the full screen icon does not appear (for different reasons), which is unfortunate.

    Regards

    Amanda

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

    Let me see if Support has any thoughts on getting it to work.  It would be a browser or web window restrictions that just needs a little extra coding.

    #340114 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    Great, thank you!

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

    Does the suggestion from the other thread work in ReviewLink?

    #342160 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    Hi Jennifer

    I’m currently using a workaround where I need to edit the code in the index.html file after publishing. This fixes the problem for the web output (but is painful and I’d rather not have to do this every time).

    I can’t use that same fix in the offline output because the index.html file is so different, I don’t know what to change.

    Regards

    Amanda

    #342162 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    Sorry Jennifer, I misread your message, the workaround I’m using does not work for ReviewLink.

    Regards

    Amanda

     

    #351136 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    7 pts
    @ahetherington9113

    Hi again

    I still can’t get the Vimeo full screen icon to work when I publish to ReviewLink. I have to explain to my reviewers that this is a limitation of ReviewLink.

    Does anyone know if this will be fixed?

    Thanks

    Amanda

    #351206 Score: 1
    Profile photo of Jim Jones
    Jim Jones
    Member
    beginner
    intermediate
    friend finder
    wise owl
    LUC16 Attendee
    picture perfect
    verified member
    contributor
    3 pts
    @jjones5058

    Amanda – set the iframe width and height to the same values as the HTML Extension object.

    This post has received 1 vote up.
Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.