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
Andreea Neacsu

Hey, guys! I have been trying to apply some of the solutions from this thread. I managed to partially make it work by embedding the video on a layer on the slide and modifying the story.js file to include:

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

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

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

However, something happens and it looks like a bug. When I reach the video, it automatically loads to fill the browser window and the course frame disappears completely and I can't exit from the video and return to the course anymore. I tested it on several computers and it doesn't always happen. Any idea why this happens? I am totally lost as I have almost no knowledge of programming. 

Please help!

George Champlin

Hi Andreea,

I haven't seen this problem. Is the video in a web object? That's when this solution works, otherwise it won't.

You should be able to leave full screen mode by hitting the escape key. When you mouse over the video the controls to leave fullscreen mode should appear along with the other play/pause buttons.

 

Andreea Neacsu

Hello, George! Yes, it's webobject. When the webobject page loads, the browser goes fullscreen automatically without any player controls. The only way back is to hit the back button within the browser and refresh and that restarts the course. It happens on chrome, firefox and IE. But not every time. This is very weird behavior that we can't allow when we deploy our courses to more than 10.000 employees. :(

For the moment, the fullscreen issue is a big downside to using articulate as our courses are demo-based and we need to offer the option of fullscreen :( Is there any future plan to include this feature? I see from this thread that it has been repeatedly requested over the past two years. I am also conditioned by the fact that I need to use our internal video sharing website for my videos.

Thank you!

Alexandra Masche

Create a html file and enter the following code:

<!DOCTYPE html>
<html>
<head>
<title>title of your video html file</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
</head>
<body>
<video class="afterglow" id="myvideo" width="1280" height="720">
<source type="video/mp4" src="/path/to/your_video.mp4" />
</video>
</body>
<html>

Enter the right path to the local or web-hosted video ("/path/to/your_video.mp4"). Insert the html file as a webobject.

During the developing process: Pay attention that there is a serious bug/missing feature in storyline, that requires to delete the webobject on every change you make in the html file. More see my thread here: https://community.articulate.com/discussions/articulate-storyline/need-help-for-bugfix

PS: Of course there a many other good free html5 players (some with more/different functions). Usually they provide a demo html file, which you simply can include as a webobject.

David Mason

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?

Ashley Terwilliger-Pollard

HI all,

I wanted to provide an update here, as Storyline 2 Update 10 was just released, and included a number of fixes which you can see in the release notes available here. The item you all may be particularly interested in is how it fixed issue where embedded Vimeo videos do not have a full screen option, You can download the latest update here, and after downloading and installing the latest update you’ll want to republish any existing content to ensure that the updates and fixes are applied.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

David Mason

Hi Ashley! I just downloaded the latest Storyline 2 update (Update 10 - Build 1607.1221) and it doesn't seem to fix the issue. I've republished the course and the Vimeo videos are still missing the full-screen option.

I'm working on a virtual machine so I fully reloaded Windows prior to installing the latest update so I know it's a clean install of Storyline. Nothing hanging over from a prior version. Any suggestions?

Ashley Terwilliger-Pollard

Hi all,

I wanted to provide an update here, as Studio ‘13 Update 8 was just released, and included a number of fixes which you can see in the release notes available here. The item you all may be particularly interested in is how it fixed an issue where Vimeo and YouTube No Longer Allow Fullscreen. You can download the latest update here, and after downloading and installing the latest update you’ll want to republish any existing content to ensure that the updates and fixes are applied.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

John Fitchett

Hi - The full screen video button does not appear for courses created in either Storyline 2 or Storyline 360 with Youtube or Vimeo videos.

This is a vital feature, especially for people viewing modules through a mobile browser, where they want to play the video full screen to see it clearly.

Please help - what can we do to get it to work?

Ashley Terwilliger-Pollard

Hi John,

I know earlier in this discussion we mentioned a fix based on Youtube and Vimeo restricting the full screen elements, but that also depending on the LMS you're using they may restrict full screen as well. Is that where you're hosting your content and still seeing the issue? 

In regards to mobile devices, a number of them will automatically launch and play it full screen in their own video players as you'll see described here. 

I know we saw some similar instances earlier this fall where  it didn't appear to work on desktop PC when viewing HTML5 output on Google Chrome but the option to allow users to go full screen works on iPad using Mobile Safari. Can you tell us a bit more about where you're testing and uploading the content?

Ashley Terwilliger-Pollard

Thanks Nitesh for sharing here as I'm sure it'll assist other users who come across this discussion. It's also worth noting that Articulate can't support the modifications to published output nor the Javascript elements - so if folks need assistance they'll want to reach ou in forum discussions such as this one. 

Indrani Sen

Hi Ashley,

I am having the same issue with embedding video codes when it does not show the full-screen video feature within a LMS environment.  

i was reading Cathy's post.  Do you think her embed code '<iframe src="https://player.vimeo.com/video/144901039" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>' will work ?

How can we resolve this issue?  Based on your response, I will redesign our video display option.  Thanks so much.

 

Indrani Sen

Hi Nitesh,

Thanks for sharing.  Currently I have this code "<iframe src="https://player.vimeo.com/video/202108136" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>".

How can I include other browsers such as IE and chrome?  Thanks so much.

Indrani Sen

Hi Ashley,

I am using a vimeo video.  Ho can I make the full-screen feature available.

 Currently I have this code "<iframe src="https://player.vimeo.com/video/202108136" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>".

 

How can I include other browsers such as IE and chrome?  Thanks so much.