Embedding Wistia video

May 04, 2018

I am trying to embed video hosted on Wistia into my Storyline 360 module using the 'Video from Website' option, and have two questions.

Wistia offers me two embed text options 'Recommended' and 'Fallback'. The recommended text gives an error in Storyline, but no indication of why it fails. The fallback option *does* work, but I'm keen to understand why the first option fails.

The next question is around the 'fullscreen' button in the controls. When I look at the video on the Wistia site I can see a fullscreen button, and I can see in the embed text several options with fullscreen (allowfullscreen
mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen), however, in the Articulate Review version of the module the fullscreen button is not visible. I think this could be related to the video being within a frame on the slide which can't get bigger than the slide itself?
I think my options are
1) have embedded video within the slide with no fullscreen option 
2) have the video open in a new browser window/tab and have the fullscreen option available

Thanks for any advice and comment
Alastair

20 Replies
Crystal Horn

Hi there, Alistair.  I'm sorry the full screen option is limited in the Articulate Review environment.  We're looking into the same issue with Vimeo videos as well, so I'll document this behavior for Wistia videos so we can broaden the scope.

If you publish your course for web, are you able to use the Wistia full screen option?  You can do a quick test of your published web output here:  tempshare.articulate.com.  Just drag the zipped web output and you'll get a link to your course that's good for 10 days.  It's perfect for having a quick look at your course in the live environment.

As for the recommended and fallback embed codes, let me put my head together with my team to find out more about how they differ.  I'll update you as soon as I can!

Crystal Horn

Hi Alistair.  Circling back, I was able to reproduce this issue in a new file using a Wistia video.  To confirm, the web output does retain the full screen option.

I looked into the difference between the standard and fallback embed codes provided by Wistia.  Our recommendation is to use the fallback embed code at this time, which uses an iframe format.  The standard embed code uses JavaScript, and Storyline has an issue with JavaScript embed codes.  We're investigating, and I'll let you know if there's any change.

Let me know if there's anything else I can do for you!

Alastair Scarlett

Hi Crystal,
I've now had the client test the embedded Wistia video within their LMS and it displays the same behaviour as in Articulate Review - the video displays, but the 'fullscreen' control does not display. See attachment.

It seems that I can offer two options:
1) Video embedded within the slides, no option to maximise
2) Videos open in a new browser tab, maximise option present, users must allow pop-ups

The initial feedback was that having the videos in a separate window might be confusing, but I think it could be mitigated with reminder messages on the base slides "The related video should be playing in a separate browser tab. If you don't see it, please be sure to enable pop-ups"

Thanks

Alastair

Crystal Horn

Hi Alastair!  Just an update that we fixed an issue in Articulate Review where the fullscreen option wasn't being included for embedded videos in Storyline and Rise courses hosted in Review.

You don't have to do a thing, though!  The fix will apply to all of your Review content immediately.  Let us know how it works.  😀

Alyssa Gomez

Hey Christopher,

Hmm, you're right. The full screen option is not there when the Storyline 360 content is embedded in Rise. I'll bring this to my team so we can take a closer look at why that's happening.

In the meantime, is there a reason why you embedded the Wistia video in Storyline and not directly in Rise? 

Christopher Lawrence

Also a good question :)

I could not figure out a way to make sure the user was viewing the entire Wistia video when embedded into Rise. In Storyline I can use JavaScript to have a button appear when the video has ended, which then submits the results. Open to any other suggestions you may have while we wait for the team to get back to you on the full screen option.

- Christopher

 

Crystal Horn

Hi there, Christopher.  Thanks for giving us some context around your setup.  ☺️

The quasi-technical explanation for what's happening here is that the video is in Wistia, is in Storyline, is in Rise.  We're approaching "Inception" territory.  🙂 Even though the video has full screen attributes in its coding, the parent container, in Rise, isn't also writing those full screen attributes.  Thus, the full screen behavior isn't making it all the way to the surface.

We've got this behavior documented for our team to explore.  I don't have a workaround that would meet your needs for tracking users having viewed the video, but I'll keep you updated on any changes.

Christopher Lawrence

Hi there. A follow up question.... since the earlier mentioned method for embedding is not currently available, I've decided to embed videos directly into rise. However, I'm noticing the full screen button does not appear when it's posted into the LMS (Cornerstone) and launched in IE. That was resolved, correct? Am I missing something? I'm using the multimedia block and embedding with a link to the video vs. an embed code. Please let me know when you have a moment.

Best,

Christopher

Ashley Terwilliger-Pollard

Hi Christopher,

The issue we fixed previously was Wistia videos that weren't going full screen when published from Storyline to Review. That may not have changed how your LMS reads this data, or how IE functions there as well.

Can you let us know if you're able to test in any other browsers or upload a copy to SCORM Cloud to see how it behaves outside of Cornerstone and IE? 

Joshua Neidish

Hey Alyssa,

I know this is a 2 year old comment but I'm curious how you were able to get this video to embed without having any of the other webpage information from Wistia. I'm using the Insert Web Object from Storyline and including have tried all embed code options (standard/fallback) but when I open that slide. the entire page with the title and header logo will appear.

Leslie McKerchie

Hi Joshua and welcome to E-Learning Heroes. 😊

Since this conversation is a bit dated, it'd be best to start fresh with what you are experiencing.

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Joshua Neidish

Hey Leslie,

Thanks for reaching out. In between asking that question and now I was actually able to resolve this problem. I ended up using code from one of their help pages around embedding videos rather than the built in embed code generated from a video itself. Pasting it below in case it helps anyone else out later on.

<iframe src="//fast.wistia.net/embed/iframe/[insert the last sequence of letters and numbers from your wistia video here]" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="620" height="349"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async=""></script>