Forum Discussion
full screen video button?
My previous idea won't work because of cross-domain issues.
But the real fix, unsanctioned by Articulate I'm sure, is to add the last 3 lines below to the story.js file around line 640:
// 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', "");
Hi George,
thank you for sharing your solution. Unfortunately it didn't work for me. I tried to figure out there the problem is and it seems to me that the story.js won’t be used if I play the story_html5.html file. file? Instead the player_compiled.js is used. Is this fix supposed to work with story_html5.html. Any ideas? Any help would be appreciated!
I also tried to replace the player.js file like Paul Wijnen did it. But I failed too.
Hi Alexandra,
Try my solution with the Web Object / HTML file and the video (MP4) file.
Just copy and paste the code which I gave in this thread.Thank you Paul! Very helpful. I got it to work. Great solution!
I'm so glad Paul's solution works, because the alternative is not pretty. Yeah Paul!
You were right about html5 using the player_compiled.js file instead of story.js/player.js. I looked at a recent project and the minified player_compiled.js file was 935kb! That's a huge js file and finding the right thing to change in the right place would be pretty daunting.
Hi George,
Pauls solution works for me, because I am working with local videos. From my understanding your solution has the benefit for the cross-domains problem. Here it is important that the outer files gives the iframe the permission to play in fullscreen.
In the player_compiled it is probably around line 304:
Element.prototype.open_webobject=function(a){if(this.webobject)this.webobject.remove(),this.webobject=null;var b=this.parent;"Slide"==this.innerType&&(b=this);this.webobject=$("<iframe class='item webobject'></iframe>");this.webobject.attr("src",$(a).attr("url"));this.webobject.attr("width",$(a).attr("width"));this.webobject.attr("height",$(a).attr("height"));this.webobject.css("left",$(a).attr("xpos")+"px");this.webobject.css("top",$(a).attr("ypos")+"px");this.webobject.css("z-index",this.depth);Here we would have to add the fullscreen options – something like …
this.webobject.attr("allowfullscreen","true");this.webobject.attr("webkitallowfullscreen","true");this.webobject.attr("mozallowfullscreen","true");
Maybe someone with better knowledge than me want’s to give it a shot.
Alexandra,
Good detective work!
I haven't tried it but your solution should work.
If you want to add this patch to your program files for Storyline you can modify the source for this file here:
C:Program files(x86)\Articulate\Articulate Storyline 2\Content\mobile\player_compiled.js
If you do that, every project you publish to html5 will have the allowfullscreen attribute attached to the webobject.
