cancel
Showing results for 
Search instead for 
Did you mean: 
teraulbert
Community Member

Is there a workaround to embedding Amara and Overstream captioned videos?

Hello Fellow Pandas,

I am having trouble with embedding Amara and Overstream videos in both Canvas and Google Sites.

Amara has JavaScript in the embed code.

Overstream has Shockwave in the embed code.

I am hoping for an easy solution (or app) to help all faculty easily embed 3rd party captioned videos in their courses.

I posted some notes here:

I am having trouble with embedding Amara and Overstream videos into my Canvas shell.

Here is the link to an example Amara video:

Intro to Psychology - Crash Course Psychology #1 with subtitles | Amara

They say to embed it by pasting the following items:

Paste this in your document somewhere (closest to the closing body tag is preferable):

<script type="text/javascript" src='http://amara.org/embedder-iframe'> </script> 

Paste this inside your HTML body, where you want to include the widget, with the width and height of your choosing:

<div class="amara-embed" data-height="370px" data-width="620px" data-url="http://www.youtube.com/watch?v=vo4pMVb0R6M"> </div> 

Here is an example of an Overstream video:

http://www.overstream.net/view.php?oid=ruuxifrjazef&query=ted+talk&s=search&pt=1&pn=1&pc=1&pu=1&pl=-...

I have been playing with this for hours and can't get the embed codes for Overstream and Amara to work in Canvas and also in Google Sites. I was trying a workaround to embed it in Google Sites to then use an External URL for captioned videos found in Amara and Overstream with no luck. Overstream's embed code uses Shockwave (which is not supported on Macs with 10.10.3 to my knowledge currently) and Amara that uses JavaScript.

Any ideas? I have been recommending that faculty use Amara and Overstream for videos they find that are not captioned to caption the videos but this is a roadblock. Google sites said that they stripped my embed code. I noticed that both embed codes do not contain https so I added an s to the http to see if that would help but no luck.

Thank you for your help in advance. 🙂

Cheers!

Tera

11 Replies
CanvasDocTeam
Community Team
Community Team

cgaudreau​ offered the previous information in the guide about captions (we moved it here to keep this question more focused):

Weird - the script and embed code seem to disappear upon save. I did some digging around (I'm interested in captioning for future videos), and was able to embed some of their Embedder test videos from this page.

Here is the code I had to embed:

****

<div class="amara-embed" style="width: 854px; color: white; background-color: transparent;">

<div style="padding-top: 225px; padding-right: 50px; padding-left: 50px; text-align: center; display: none;"><img src="//s3.amazonaws.com/s3.www.universalsubtitles.org/21ad1db2/images/embedder/loading.gif" alt="" /></div>

<iframe style="border: none; overflow: hidden; visibility: visible;" src="http://amara.org/embedder-widget-iframe/noanalytics/?data=%7B%22height%22%3A%22480px%22%2C%22width%2..." width="854" height="517"></iframe></div>

<div style="padding-top: 225px; padding-right: 50px; padding-left: 50px; text-align: center; display: none;"><img src="//s3.amazonaws.com/s3.www.universalsubtitles.org/21ad1db2/images/embedder/loading.gif" alt="" /></div>

<p><iframe style="border: none; overflow: hidden; visibility: visible;" src="http://amara.org/embedder-widget-iframe/noanalytics/?data=%7B%22height%22%3A%22480px%22%2C%22width%2..." width="854" height="517"></iframe></p>

****

Test__iPad_Scavenger_Hunt_2015.jpg

I wonder if it's a matter of playing with this code and entering the psychology video. I just don't know where that goes in order to load properly...

Hope this helps move things in the right direction!

Thank you. Unfortunately, that solution did not work on my end. I believe it may have something to do with enabling Javascript at the Global level. I am helping faculty at various colleges that may or may not have that capability. Is it just my new Mac not having the correct plug-ins? 😉

 @teraulbert ​, I've been playing around a little bit more with the code and I think you are spot on with the Global Javascript enabled. Here's hoping someone from Instructure will see this and maybe shed some more insight.

That is, unless, you got it to work...

Hello cgaudreau​! Thank you for helping me look for a solution. I have not yet figured it out. I found I can embed a Overstream video into a SoftChalk Cloud activity and then embed it in the course but Amara.org did not even work in SoftChalk. I am hoping we find a resolution soon as we have been recommending these third party captioning sites to our faculty throughout California to make sure we are being fully accessible.

I will be sure to post an update if I get an update or find a solution that isn't too clunky. 🙂

Renee_Carney
Community Team
Community Team

My first question would be - do you need to embed them?

I agree - I very much prefer embedded content that does not take the learning out of the virtual class, but...

Could you instead use the URL provided and place it in a module as an eternal link that opens in a new page?

1. Go to your module and click +

2. Select External URL

3. Paste the URL

http://www.amara.org/en/videos/3XywQaCmnoFj/url/842290/

4. Click the checkbox to open in a separate tab.

5. Save & Publish

Hello Renee,

Thank you for your reply and alternative method.

I am an instructional designer helping faculty at 112 colleges. The majority of faculty are brand new to Canvas and are migrating their content over from Blackboard, Moodle, Etudes, and D2L.

My hope is that the third party captioning sites like Overstream.net and Amara.org will still be able to provide faculty with embeddable objects to retain uniformity, usability, and student interest.

Captioned videos are a hot topic for our faculty members. My hope is to see an app added to the app center that can hopefully bypass the issues we are currently facing with embedding shockwave (Overstream.net) and javascript (Amara.org) content.

Thank you for your help! Smiley Happy

-Tera

I'm not sure if this helps, but the amazing  @chofer ​ just blogged a post on Embedding Flash (SWF) Animations in Canvas

Hello  @Renee_Carney ​,

I appreciate your help. Unfortunately, this does not solve the problem as our instructors do not have the access to the swf files. They are trying to embed javascript and shockwave items from third party captioning sites. This is a critical concern for accessibility issues.

Thank you for your help!

Tera

Thank you for the mention earlier today,  @Renee_Carney ​.  I was just updating my blog entry that I created earlier this year so that it referenced the Better File Browsing screens instead of the old "Files" view.