Forum Discussion

DamienDickerson's avatar
DamienDickerson
Community Member
12 years ago

full screen video button?

I can't see full screen video button on playbar after when I importy a movie? Is any way to resize video on full screen after interactiion? (and came back to small size) ?
storyline 360
GeorgeChamplin-'s avatar
GeorgeChamplin-
Community Member
10 years ago

Alexandra & Paul,

Allowfullscreen works out of the box on my iPad, but not for html5 content viewed in a browser (Chrome).

I've found the place to tweak the player_compiled.js file to allow full screen play of cross-domain videos like those from YouTube and Vimeo in a desktop browser.

This is the function that creates the iframe for html5 content, it's around line 919. Add the three lines at the bottom:

WebObject.prototype.createRef=function(){if(this.ref||!this.createBaseRef())return!1;this.contentRef=$("<iframe class='item webobject unhideable'></iframe>");this.contentRef.attr("width",this.width);this.contentRef.attr("height",this.height);

this.contentRef.attr("allowfullscreen",'');
this.contentRef.attr("webkitallowfullscreen",'');
this.contentRef.attr("mozallowfullscreen",'');

The same advice applies from my post above to add it to the program files for Storyline to include this functionality in future published projects without having to tweak each build.

GeorgeChamplin-'s avatar
GeorgeChamplin-
Community Member
10 years ago

I just upgraded to the latest version of Storyline and remembered that the two patches I've mentioned in this thread for the player.js and mobile/player_compiled.js files will need to be reinstalled in the latest versions of these files here, if you want them to affect new builds:
C:\Program Files (x86)\Articulate\Articulate Storyline 2\Content\

The line numbers haven't changed much.

  • DavidMason's avatar
    DavidMason
    Community Member
    10 years ago

    Hi George,

    In our courses we have a mix of Vimeo and YouTube video embeds in Storyline. YouTube for the public facing videos and Vimeo for others than need the domain name white listing. We use the "Insert > Video > Video from Website" option to embed the Vimeo code into our courses.

    We just realized that our full screen option is missing (like everyone else). I've just stumbled upon your fix but seem to have no luck getting it to take.

    Here's my re-cap of your instructions to make sure that I have everything correct:

    On my desktop, I need to track down two specific files
    C:\Program Files (x86)\Articulate\Articulate Storyline 2\Content\player.js
    C:\Program Files (x86)\Articulate\Articulate Storyline 2\Content\mobile\player_compiled.js

    In the "player.js" file, around line 640, I need to add the last three lines of code:

    // Create the iframe
    var oIFrame = document.createElement('iframe');
    oIFrame.frameBorder = "0";
    oIFrame.id = "div" + strId;
    oIFrame.style.border = "0";
    oIFrame.style.width = "100%";
    oIFrame.style.height = "100%";
    oIFrame.allowtransparency = "true";

    oIFrame.setAttribute('allowfullscreen', "");
    oIFrame.setAttribute('webkitallowfullscreen', "");
    oIFrame.setAttribute('mozallowfullscreen', "");

    In the "player_compiled.js" file, around line 919, I need to add the three lines at the bottom as well

    WebObject.prototype.createRef=function(){if(this.ref||!this.createBaseRef())return!1;this.contentRef=$("<iframe class='item webobject unhideable'></iframe>");this.contentRef.attr("width",this.width);this.contentRef.attr("height",this.height);

    this.contentRef.attr("allowfullscreen",'');
    this.contentRef.attr("webkitallowfullscreen",'');
    this.contentRef.attr("mozallowfullscreen",'');

    These two file changes should allow Articulate to automatically adjust the export code to allow the iframe fullscreen option to return. Am I missing something here?