full screen video button?

Feb 06, 2014

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)

?

178 Replies
George Champlin

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.

Paul Wijnen

Hi Rebekka,

I just did a test and the combination of the solution of George with the instructions of Articulate for creating a youtube webobject will do the trick for you :).

QUOTE George Champlin
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', "");

You can apply this in the published story.js file!

ARTICULATE YOUTUBE INSTRUCTIONS
https://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline

full-screen button

If this still does not work for you, you can have a look here for the possible causes or maybe solutions.

https://support.google.com/youtube/answer/6276924?hl=en

Alexandra Masche

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.

 

George Champlin

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.

Alexandra Masche

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.

 

 

Paul Wijnen

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

George Champlin

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.

Rebekah Massmann

Thank you guys so much! This has all been extremely helpful. To clarify, I have been using Vimeo and embedding it via the Insert > Video > Video from Website method. This is ideal because I can keep the security settings on my video using this method (versus a link that could be copy and pasted and shared outside of our network).

I was actually able to get this to work (hooray!) using Paul's method (we don't have a lot, if any, mobile usage, so the desktop browser would be my primary concern). However, I have one more wrinkle to throw in the mix to you smart people!

We use an LMS and have had issues in the past with it properly recording completion of our courses when viewed in Google Chrome. We finally figured out this solution fixed our issues there, so we now add the relay.php file to all published courses and link to that. 

My problem is that when I use the relay.php URL (versus the story.html URL), it doesn't show the full screen button.

Any thoughts???

Paul Wijnen

You're welcome. And good job George!

hmmm... I cannot fully re-create this situation.
It looks like the relay.php loads the index_lms.html which loads the story.html.
I would recommend to use the DOM inspector (IE: F12) to see what is happening.
I have the supsission the relay.php creates another iframe or something similar which doesnt have the allow-full-sreen attributes. The top iframe needs this. It doesnt matter if a child iframe has the attributes.

You could try to add something like this to the index_lms.html file. This really involves some testing, but first try to see how the structure is build-up when everything is published online and where you can find back the allow-full-screen attributes (and where not!).

  //strContentLocation = "TestAllFunctions.htm";
  
  function LoadContent(){
   window.scormdriver_content.document.location.href = strContentLocation;
   window.frameElement.setAttribute("allowFullScreen", "allowFullScreen");
   window.frameElement.setAttribute("webkitAllowFullScreen", "webkitAllowFullScreen");
   window.frameElement.setAttribute("mozAllowFullScreen", "mozAllowFullScreen");

  }
  </script>

Andreea Neacsu

Hey, guys! I am trying to insert a video in my course and find a way to make it full screen. I tried embedding a link from my company's video hosting website directly on the slide, but it didn't work to make it full screen when I published it, even though the video controls appear, nothing happens when I click it.

I tried embedding it as web object and have it open in a new browser window. However, it shows up looking very bad on the slide, as I can't make the webobject widescreen and they still need to click on the webobject to have the new window with the video pop up and then click again to have it started! Is there a way to add the trigger to play video from webobject without having to show it? I tried adding a button and adding a trigger to the button 'play media - online video' but nothing happens when I publish the course, the trigger button doesn't seem to be working. 

Please help!

George Champlin

Andreea & Paul,

The story.html populates the webobject's div at runtime when the first slide with a webobject is navigated to. So the story.html file isn't going to tell us much. You need to check it at runtime with Chrome dev tools or another browser's tools to see what the webobject embed code looks like.

George Champlin

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.