Forum Discussion
full screen video button?
Hi George, hi Paul,
in the project I just working on I am distribute html5 only. I use John Dyer Mediaelement-Player to deliver my local hosted videos. In this scenario your solution Paul works perfect for me.
Anyways, during testing different scenarios I bumped into the cross-domain issues. Your solution Paul is not working for me with cross-domains. Georges Fix should be the fix to get around it (in flash). The player.js/story.js file is not used in the story_html5.html file. Instead the player_compiled.js is used. So I was wondering how to fix that. My posted solution looks nice, but doesn't work so far.
This is not a problem for my current project. But I thought others who may have the cross-domain problem in HTML5 may want to play with it and find the right hack.
Okay, so it's probably the server restrictions that block the full-screen option right?
I also placed my storyline test files on our server and tested them on a mobile device. I dont have acces to the server settings, so I do not know what the exact security settings are. When I openend the HTML5 files, the full-screen option worked. I did not need to change anything in the player_compiled.js file. The files do have the fix from George in the story.js file, but like you already said, this will probably not be used by the HTML5 files.I believe this might also depend on which (mobile)browser you are using (browser settings).
When I think of somehting that might help you (others) I will report back :).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.
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.
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.jsIn 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?
