Forum Discussion
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)
?
178 Replies
Hi Eleonora,
When you embed videos from websites, such as YouTube and Vimeo, in your Articulate content, you may find the fullscreen button is either missing or not working in your published output.
This is a known issue. For security reasons, many web browsers are now restricting fullscreen mode for embedded iframe content.
We can't override browser security restrictions; however, you can enable fullscreen mode (or full-browser mode) by configuring web videos and web objects in your Articulate content to open in a separate window.
It would be nice if we could mark this thread as "solved" . That way people at least know they can search for the solution and explanations.
Hi Paul,
Since threads can take on a number of other questions or issues, we don't have a "solved" button - but you can use the "Mark as helpful" below any responses that you think are helpful as an answer.
Hi Ashley,
Okay I didn't know that. Thanks!
Is there a solution/update for this problem? From my perspective it is a storyline problem. As Justin Grenier pointed out the outer iframe is missing the allowfullscreen attribute. Newer versions of the most browser block fullscreen for security reasons in that case.
In my published projects also the youtube fullscreen button stopped working. A storyline bugfix would be very easy. Articulate simply has to change the output for the outer iframe and add the allowfullscren attribute. In general or better with an option to choose in the dialog window.
Paul,
I greatly appreciate your sharing! I was starting to walk through your steps, and I had a question. This workaround is not actually to work around the full screen problem with external video hosts, is it? This method requires storing the video directly into the Storyline files and providing a method to see it full screen. Does my question/comment make sense? We have the ability to store the file on our servers, but find that the quality and bandwidth needs are less if we can store on Vimeo and embed the linked file.
I was hoping this was a workaround for that. Bummer! :-/
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-storylineIf this still does not work for you, you can have a look here for the possible causes or maybe solutions.
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 Paul,
I think your right that it may depends on the (mobile)browser. I would think that it is not a server restriction.
Did you host the videos on a different server than the storyline project?
yes, I used the same youtube video/link as in my last post/message.
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???
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>
Excellent Job George. Thank you very much. I hope Articulate will implement this fix in future!
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!
hi Andrea,
How did you create the video player / web object?
Does it have an "autoplay" option maybe?Hi, Paul!
Autoplay option is disabled when I select 'show video in new browser window'.
