full screen video button?

Hi there, Stuart.

We understand Vimeo's change, and we understand what they are asking us to do to accommodate their change (propagate the fullscreen attributes to all parent IFrames).

We won't be able to commit to a fix for this issue in the short term.  We will evaluate and prioritize Vimeo's change according to its breadth and depth of impact on our customers (as well as any downsides to the change) and make a decision from there.  To this end, we appreciate you lending your voice to the thread and letting us know about the impact on your learners.

We'll keep this forum thread updated with any developments.

Hi Justin,

Thank you for clarification on this issue. Thankfully i've managed to resolve this issue by using our developers to tweak things slightly on the exported files and reinstate this option.

I look forward to seeing a potential update for this in the future.

Glad to hear of your workaround, Stuart!

If you wouldn't mind sharing the specifics here, I'm sure there are others in this thread who could benefit.  Thanks!

It didn't work as hoped across all browsers unfortunately so i won't post it as it wouldn't be of any use. It would be great if a Storyline fix were available to recognise the fullscreen code in the parent iframes to reinstate this button on future exports. 

As of now i currently have probably more than 100+ courses all containing video with no fullscreen button...

This is quite worrying and if not sorted out soon i guess will be an overall decider in continuing with Storyline as a tool to deliver our training content. As a company who specialise in delivering training content with video, it is essential a third party is used for this to deliver it, keeping out courses light but with great quality video. 

I cannot for the life of me understand why moving forward this patch would be ignored and it would be expected that embedding content from any third party source would be acceptable without these functions?

Hi everyone,

My client uses BrightCove to store the videos and we are having the same issue, except the full screen button does show, it just doesn't work.

Has anyone else experience this with BrightCove videos? I am assuming it is the same issue...

Hi all,

Thanks for your patience as we investigated this issue and although this will continue to be an open issue for investigation I wanted to share the latest update from them. 

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.

If there is additional information to share we'll be certain to post in this thread to keep you all posted. 

Hi there Stuart, 

I second your request for updates (it's been more than 2 months now).

We feel the same way, as usual, each party will blame the other one.

Not happy with anyone's support. We are paying for both services (Vimeo Pro) and Storyline 2 licences, and we rely heavily on embedding videos within storyline to make sure the scorm packages are not that big in size when dealing with HD videos.

We may need to look into developing in another tool....

Any last chance for Articulate to respond to this issue?

Are you embedding with Brightcove by just using the URL to the video, or the HTML embed code? I insert a web object in Storyline and then just use the Brightcove URL and the fullscreen button works. I do have to convert the URL to https:// though, following these instructions: https://support.brightcove.com/en/video-cloud/docs/using-https-url-players-hosted-linkbrightcovecom

Dear Ashley,

If it's as you say related to web browsers restricting fullscreen mode for embedded iframe content, why is it then that when embedding vimeo videos directly into HTML sites the full screen button appears and works fine?

Regards.

Hi Will, thanks for your response.

I was using the embed code, and in the end we got around the issue (and other issues we were having) by inserting the videos from file rather than embed.

I will check out your link, may come in handy next time, thanks so much :) 

Good Morning, Eric.

Vimeo explained their change here.  More specifically:

If the Vimeo iframe embed code is placed within another iframe, that parent iframe must also include the same fullscreen attributes.

This is a new requirement from Vimeo, and it is related to changes in web browser security.

To illustrate this new behavior a little bit better outside of storyline:

• Note that on this page, a Vimeo video within an IFrame retains the fullscreen button.
• Note that on this page, a Vimeo video within an IFrame, within an IFrame, loses the fullscreen button.

We can't promise to make a global change to Storyline based on a change by one specific video host, so right now we're recommending the workaround Ashley shared, and we'll certainly keep this Forum Thread updated with any developments.

I'll just throw my hat in the ring here as also experiencing this issue and it being of importance to our organization to get a solution figured out. I know next to nothing about coding, but it seems like there should be a way to manually change the code to the same security settings.

I will say I have no animosity towards Articulate! It's obvious this is not solely an Articulate or Vimeo issue. It's a major problem these browsers have caused with a lot of providers/tools. We also have an option to embed a video directly into a part of our LMS with html code...guess what, no full screen button there either. 

The workaround recommended on this thread (to set the video to open in a new window) doesn't work if you have security settings preventing where the video can be embedded/played. It will show up like the picture below until it is clicked, and then it will play. Plus, we're already launching a new window within the LMS, so to launch another one for a video to play seems clunky.

That said, the best workaround I've found is to change the player settings. For us, the video is the main component of the course, so I just set the player to push the browser to full screen. This may not be a great solution if you had several videos in the course and you wanted the user to be able to fullscreen more selectively, but maybe it will help someone out there. Still, for those who have 1500 courses, what a nightmare. :-(

Please keep us updated! 

Thanks Rebekah for sharing your experience and solution here - as Justin mentioned above, we can't promise to make a change based on a video hosting site changes, but once we have any updates from our team or hear about updates from Vimeo we'll be certain to share here. 

Hi all,

I found a solution for the fullscreen problem with Storyline (2).

First I tried using the MP4 smartplayer from Camtasia (8.6) and use that as a webobject within Storyline. This worked, but I had to set the compatibility mode to IE9 before I could see the fullscreen button. After doing this I found out that it was using a flash based controller. I was hoping it would use the HTML(5) video tag.
So I created a fairly simple code with the video tag and load this as a webobject into storyline. This worked, but again the fullscreen button was disabled or hidden.

I did alot of searching and tried many things. I came to the conclusion that the problem is that Storyline creates an iframe in which the webobject gets loaded. That iframe NEEDS the allowfullscreen code on it, otherwise the fullscreen button wont be there. The iframe which storyline creates doesn't have that code on it, so thats why the fullscreen buttons do not work. Even if you have that code in your own webobject files, it won't work.
I created a simple code with the video tag and made it resizable (elastic). I added a code which adds the fullscreen attributes to the parent iframe element. This makes the fullscreen function work.

Here is my code. You will only need ONE html file!! (and the video file ofcourse)

<!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">
 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 autoplay controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.<br>
  Please try to change your browser's compatibility mode.<br>
  Otherwise you need to try another browser.
</video>

</body>
</html>

<video> tag compatability overview:
http://www.w3schools.com/html/html5_video.asp

I hope this helps you :) Let me know and share if it does!

Paul

PS: I have a project with 72 videos in it. Sometimes when I tested locally, the audio of the videos kept on playing while continuing to the next slide/video. I found out that this doesn't happen when you place the files online. So you know.

Hi Paul,

Thanks for sharing the code here and in regards to the iFrame element you'll see that described here in our KB article about the issue. 

Also, when testing the output you'll want to test within the intended environment as testing it locally is known to cause issues such as you ran into with the audio. You can read about that here. 

Hi Ashley,

I know and I tested the code online in IE, Firefox and Chrome. It works because it adds these 3 attributes to the iframe element of storyline:

- allowFullScreen
- webkitAllowFullScreen
- mozAllowFullScreen

Happy to hear it Paul - and just wanted to share those reminders for others who come across this fix and don't go all the way back through the thread. :-) 

Hi Paul, you are certainly some kind of genius :)

I am going to try this, but first, could you help me out with a couple of questions? I am not a code genius, clearly :) 

1. Is this solution to create a full screen button for a video in SL inserted from file, or a web object (i.e. an online video)? Right at the top you said "and load this as a webobject into storyline." but then you said "You will only need ONE html file!! (and the video file of course)" so I am not sure which this applies to (sorry!) 

2. When you say "Here is my code. You will only need ONE html file!! (and the video file of course)" what do you mean by "ONE html file". Do I need to create a new html file after I publish the project and add that code to it?

Sorry if these questions are a bit silly, and thanks for your help!

Hi Veronica,

Because of the "genius" remark I'm more than happy to explain this to you :P.

Step 1:
Create a folder for the webobject files.

Step 2:
Create a new HTML file and paste the code I gave you in it.
Rename "video.mp4" to the name of your video file.

Step 3:
Place your video file next to the HTML file. MP4 / WebM / Ogg (MP4 is the most compatible)
http://www.w3schools.com/html/html5_video.asp
So now we have 2 files.

Step 4:
Insert a webobject onto your slide in SL. Browse to the folder you created which has the 2 files in it. It doesn't matter where you saved your files. SL will copy these files to the published folder when publishing your project.

Step 5:
Publish and see if it works.

Step 6:
Ask me again if you have any questions :).

Good luck!

Before I created this solution I created another solution with only the build-in options of SL.
Insert a video file onto your slide and set it to "play on slide".
Copy and paste that video and set it to "play in new window".
Scale that video down to a small size of a button and place below your "normal" video for instance.
Right-mouse click on it and set a poster-frame for it. I created a custom fullscreen button.



Also set a trigger on the small video object to pause the timeline when clicked.
This will pause the video on the slide and open a new window with the video in it at it's original size. This video will have a playbar at the bottom. I believe you will have to enable the controller in the video settings in storyline for this small "video button" / "fullscreen button".

The downside to this is that SL creates TWO video files for this and you might have the double data transfer per video file you watch.

But I wanted to share this with you anyways.

Paul

Thanks Paul for sharing that explanation with Veronica and all of us here. This is the type of thing we love to see in the community. If you have a chance you may want to look at also recording a video or screencast of how to do this and share that in the forums as well. You could look at using Replay to record and publish so that you could put the MP4 here or up on YouTube. 

I don't know if I'm in the correct area but...

So I spent almost 2K on Storyline and characters. My courses are very reliant on videos that will play in fullscreen because I'm showing "blueprints" with details, etc.

I've been reading all the posts here and while I'm impressed with some of the knowledge that's being passed around, I'm also discouraged, thinking that for 2K I still need to go waaay behind the scenes and program my way to my answers. I don't want to do this.

What can I do...this software is useless to me if I can't show videos in HTML5/HD...or at least crystal clear, full screen.

Regards,

Harry

I'm also a bit dissapointed that there is no fullscreen option for videos in Storyline :(

Hi Harry and Paul,

Storyline doesn't have a full screen option for the videos or the course as a whole, but you may want to look at including the videos as web objects or links to open them in a new window as the latter would allow users to likely use the full screen button that may be included in web based videos. As far as embedding videos, you'll see some additional information here on how the full screen button may be missing.