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)
Store the video files outside the webobject folder. Copy the video files after publishing into this folder: \story_content\external_files\
YOU CAN USE A VARIABLE IN STORYLINE TO PROCEED TO THE NEXT SLIDE WHEN THE VIDEO HAS ENDED. I USED "autoEndSlide" FOR THAT. YOU CAN USE THIS METHOD FOR ANYTHING YOU WANT OF COURSE.
I DICOVERED THAT THE AUTOPLAY FUNCTION OF THE VIDEO TAG WILL CAUSE DOUBLE AUDIO IN IE. SO DONT USE IT AT ALL.
I ALSO READ THAT THE MP4 VIDEO CODING SHOULD BE SET TO "BASELINE PROFILE" AND AAC AUDIO.
I've reconsidered how I do web objects now and I now usually use "display in a new browser window" (with no browser controls) instead of "display in slide." This avoids all the mess that is "embedding." Browsers and site owners change the rules about embedding so often that I think it just isn't worth it. If you think about it, there are actually several advantages to opening a web object in a new window:
1. The window can be the size you want regardless of whether your storyline presentation scales.
2. You can include content on the slide that explains what is being displayed (a video, surveymonkey survey, etc...) and tells the user to close the window when done.
3. If you are in an https (secure) environment, the link to the web object can be http without issue.
To me it just isn't worth the hassle trying to get all the stars aligned so that video that is stuck in that box plays the way I want it to.
Thanks Will for sharing that insight here - and I think it's a good point in terms of how different browsers/sites change the set up as that's what occurred with the most recent Vimeo change as well.
I'm a Storyline newbie, but has anyone else noticed that the full screen option is there and works when viewing the course in an iPad?
I'm using Chrome on the iPad, and viewing the course on my LMS (BizLibrary) with a normal embedded video and NOT opening the video in a new browser window.
If it works there, is there any chance we can get it to work on a PC?
I'm a Storyline newbie, but has anyone else noticed that the full screen option is there and works when viewing the course in an iPad?
I'm using Chrome on the iPad, and viewing the course on my LMS (BizLibrary) with a normal embedded video and NOT opening the video in a new browser window.
If it works there, is there any chance we can get it to work on a PC?
I think there is a good change you can get that to work on a PC. All the scripting is done by the player. Just like the youtube or captivate or camtasia videplayer it will detect if you are on a mobile device or on a PC. It will detect if you can use flash or not. The scripting which is used by the video players also contain the "allow fullscreen" part.
When on a PC it will use a flash based player wich can enable the full screen function. I tested this with a youtube embedded video and the fullscreen function works on a PC. This will most likely be the same for your Vimeo video.
When on a mobile devide it should use the HTML5 files. I also tested the embedded youtube video on my Android phone. This also works when openeing the HTML5 files. I get a different looking video player with the fullscreen fuction present and working. This is the HTML5 based videoplayer of youtube.
When you want to manually use the HTML5 videoplayer (which is built-in all newer major browsers) on a PC, this is a different story. See earlier posts for more information on that.
I hope this answers your question a little bit. Somebody correct me if I'm wrong :).
I think I missed something. How did you embed your YouTube video in the first screen above? Is it a web object or from a web page. I can't embed YouTube from a webpage because ofthis issue.
I've also been messing around with your idea of adding the allowfullscreen attribute to the enclosing iframe. Even after the webobject is loaded you can add the attribute to a normal YouTube enclosing iframe, and if you can force a reload of the iframe src, it will activate the fullscreen button. I've only done this with the console so far. But it should be doable to add code to the story.html file to do it.
I think I missed something. How did you embed your YouTube video in the first screen above? Is it a web object or from a web page. I can't embed YouTube from a webpage because ofthis issue.
I've also been messing around with your idea of adding the allowfullscreen attribute to the enclosing iframe. Even after the webobject is loaded you can add the attribute to a normal YouTube enclosing iframe, and if you can force a reload of the iframe src, it will activate the fullscreen button. I've only done this with the console so far. But it should be doable to add code to the story.html file to do it.
Hi George,
I used the Web Object method. The trick is to only use the video ID with this part of youtube URL:
I did look into something like that also, but because I have to share my method with other team members, I worked out the method which only involves editing one HTML file. It doenst involve editing storyline files before or after publishing.
I tried to do the same as you, but I tried to do this in the player.js file, so you only have to do this once and not everytime after publishing.
Program Files (x86)\Articulate\Articulate Storyline 2\Content\player.js (same code also around line 640)
I believe a had no luck doing this, but I'm not sure actually. You can give it a go if this is the best solution for you!
Good catch. I was able to replace the player.js file in the Program files and now when I publish all my story.js files have the added lines which fix the allowfullscreen issue.
I'm treating it as a software patch. I have worked with teams where we all applied a similar patch to Storyline program files so everyone can share the enhancement.
Make the same 3-line addition to the player.js file in the Content folder. I had to save it as a copy on my desktop. Then, depending on your admin rights, I was able to paste it into the Program Files (x86)\Articulate\Articulate Storyline 2\Content\ folder and overwrite the original player.js.
Now when I publish, Storyline grabs this and other files from the Content folder, changes its name to story.js and adds it to the story_content folder in the published project.
You can also use this technique to tweak the master css files for html5 output. Like, for instance, to change the size of menu items on the iPad if they're too small.
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.
See my post above from about 3 weeks ago, beginning with, "My previous idea won't work because..." Below that you'll find the fix, if you're not afraid of editing a little javascript.
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.
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.
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.
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! :-/
178 Replies
UPDATE
Store the video files outside the webobject folder.
Copy the video files after publishing into this folder:
\story_content\external_files\
YOU CAN USE A VARIABLE IN STORYLINE TO PROCEED TO THE NEXT SLIDE WHEN THE VIDEO HAS ENDED. I USED "autoEndSlide" FOR THAT.
YOU CAN USE THIS METHOD FOR ANYTHING YOU WANT OF COURSE.
I DICOVERED THAT THE AUTOPLAY FUNCTION OF THE VIDEO TAG WILL CAUSE DOUBLE AUDIO IN IE. SO DONT USE IT AT ALL.
I ALSO READ THAT THE MP4 VIDEO CODING SHOULD BE SET TO "BASELINE PROFILE" AND AAC AUDIO.
NEW CODE
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Video</title>
<style>
body {
background-color: #FFFFFF;
font-family: "Calibri";
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
max-width: 100%;
height: auto;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
<script type="text/javascript">
//adding these attrributes allows the browser to use full-screen
var frameEl = window.frameElement;
if (frameEl) {
window.frameElement.setAttribute("allowFullScreen", "allowFullScreen");
window.frameElement.setAttribute("webkitAllowFullScreen", "webkitAllowFullScreen");
window.frameElement.setAttribute("mozAllowFullScreen", "mozAllowFullScreen");
}
</script>
</head>
<body oncontextmenu="return false">
<video controls="controls">
<source src="../../external_files/video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
Your browser does not support the video tag.<br>
Please try to change your browser's compatibility mode.<br>
Alternatively, you can try using another browser.
</video>
<script>
var player = parent.GetPlayer();
player.SetVar("autoEndSlide","false");
var video = document.getElementsByTagName('video')[0];
video.onended = function(proceed) {
//alert('Video Ended');
var player = parent.GetPlayer();
player.SetVar("autoEndSlide","true");
};
//this is a workaround for the autoplay function
setTimeout(function(delay){
video.play();
}, 1000);
</script>
</body>
</html>
Thanks Paul for sharing that code here - it's a bit outside our area of support, so it's always great to have community examples to point too.
I've reconsidered how I do web objects now and I now usually use "display in a new browser window" (with no browser controls) instead of "display in slide." This avoids all the mess that is "embedding." Browsers and site owners change the rules about embedding so often that I think it just isn't worth it. If you think about it, there are actually several advantages to opening a web object in a new window:
1. The window can be the size you want regardless of whether your storyline presentation scales.
2. You can include content on the slide that explains what is being displayed (a video, surveymonkey survey, etc...) and tells the user to close the window when done.
3. If you are in an https (secure) environment, the link to the web object can be http without issue.
To me it just isn't worth the hassle trying to get all the stars aligned so that video that is stuck in that box plays the way I want it to.
Thanks Will for sharing that insight here - and I think it's a good point in terms of how different browsers/sites change the set up as that's what occurred with the most recent Vimeo change as well.
I'm a Storyline newbie, but has anyone else noticed that the full screen option is there and works when viewing the course in an iPad?
I'm using Chrome on the iPad, and viewing the course on my LMS (BizLibrary) with a normal embedded video and NOT opening the video in a new browser window.
If it works there, is there any chance we can get it to work on a PC?
Here's a screenshot from my iPad.
I think there is a good change you can get that to work on a PC. All the scripting is done by the player. Just like the youtube or captivate or camtasia videplayer it will detect if you are on a mobile device or on a PC. It will detect if you can use flash or not. The scripting which is used by the video players also contain the "allow fullscreen" part.
When on a PC it will use a flash based player wich can enable the full screen function.
I tested this with a youtube embedded video and the fullscreen function works on a PC. This will most likely be the same for your Vimeo video.
https://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline
When on a mobile devide it should use the HTML5 files. I also tested the embedded youtube video on my Android phone. This also works when openeing the HTML5 files. I get a different looking video player with the fullscreen fuction present and working. This is the HTML5 based videoplayer of youtube.
When you want to manually use the HTML5 videoplayer (which is built-in all newer major browsers) on a PC, this is a different story.
See earlier posts for more information on that.
I hope this answers your question a little bit. Somebody correct me if I'm wrong :).
Paul,
I think I missed something. How did you embed your YouTube video in the first screen above? Is it a web object or from a web page. I can't embed YouTube from a webpage because of this issue.
I've also been messing around with your idea of adding the allowfullscreen attribute to the enclosing iframe. Even after the webobject is loaded you can add the attribute to a normal YouTube enclosing iframe, and if you can force a reload of the iframe src, it will activate the fullscreen button. I've only done this with the console so far. But it should be doable to add code to the story.html file to do it.
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,
I used the Web Object method.
The trick is to only use the video ID with this part of youtube URL:
http://www.youtube.com/embed/video_id
Replace "video_id" with the actual video ID. Example:
EMBED CODE
<iframe width="560" height="315" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen></iframe>
NORMAL YOUTUBE URL
https://www.youtube.com/watch?v=YqeW9_5kURI
So, use this as Web Object URL:
http://www.youtube.com/embed/YqeW9_5kURI
SOURCE: https://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline
Hi George,
Good find!
I did look into something like that also, but because I have to share my method with other team members, I worked out the method which only involves editing one HTML file. It doenst involve editing storyline files before or after publishing.
I tried to do the same as you, but I tried to do this in the player.js file, so you only have to do this once and not everytime after publishing.
Program Files (x86)\Articulate\Articulate Storyline 2\Content\player.js (same code also around line 640)
I believe a had no luck doing this, but I'm not sure actually. You can give it a go if this is the best solution for you!
Thanks for your input!
Hi Paul,
Good catch. I was able to replace the player.js file in the Program files and now when I publish all my story.js files have the added lines which fix the allowfullscreen issue.
I'm treating it as a software patch. I have worked with teams where we all applied a similar patch to Storyline program files so everyone can share the enhancement.
Great!
A patch sounds very profesional. How do you create that? (in a nut shell)
Make the same 3-line addition to the player.js file in the Content folder. I had to save it as a copy on my desktop. Then, depending on your admin rights, I was able to paste it into the Program Files (x86)\Articulate\Articulate Storyline 2\Content\ folder and overwrite the original player.js.
Now when I publish, Storyline grabs this and other files from the Content folder, changes its name to story.js and adds it to the story_content folder in the published project.
You can also use this technique to tweak the master css files for html5 output. Like, for instance, to change the size of menu items on the iPad if they're too small.
Hello, any news on this issue? Is full screen working for ambeded videos? I can´t make it work and I am not changing vimeo code at all.
Thanks for your help
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.
Eleonora,
See my post above from about 3 weeks ago, beginning with, "My previous idea won't work because..." Below that you'll find the fix, if you're not afraid of editing a little javascript.
It works without opening 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.
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.
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! :-/
Thank you Paul! Very helpful. I got it to work. Great solution!