cancel
Showing results for 
Search instead for 
Did you mean: 
kgarcia
Community Participant

Embed Code Not Working

Jump to solution

Any thoughts on a way to make this embed code work in Canvas? I am trying to embed a Teaching Channel video into a PD course for teachers and nothing is showing up. I know I can link out to the site, but I would really like to find a way to get the video inside the course.

<script src='https://www.teachingchannel.org/videos/differentiating-instruction-strategy/embed.js?width=480' type='text/javascript'></script>

The embed code above comes straight from the site (Videos, Common Core Resources And Lesson Plans For Teachers: Teaching Channel​.) It is generated when you click on the embed button above the video.

Thank you!

1 Solution

Accepted Solutions
awilliams
Community Champion

Hey  @kgarcia 

The website is giving you some Javascript to use. Canvas strips out Javascript code from pages for various reasons. You can, however, add your own HTML file with Javascript in it. So my recommendation would be to:

1. Create a simple HTML file and paste the code from that website in that file.

2. Save this file and upload it to the Files area of your course.

3. Add this file to any module in your course.

This works great if you already use modules. If you don't, you can choose to use modules for this purpose, or follow these steps to embed a preview of that HTML file in one of your pages using an iframe. The following assumes you have done steps 1 & 2 above are using Chrome browser and Windows. Instructions may vary slightly for other browsers and OS's.

1. Go to the files area of your course and find the newly created and uploaded HTML file.

2. Modify the URL slightly. Take off everything after the file id# and add "preview"

So for me, the URL to my file was: https://coconino.instructure.com/files/83254551/download?download_frd=1

You would change this to be: https://coconino.instructure.com/files/83254551/preview

3. Go to any page and get in edit mode or create a new page

4. Switch to the HTML editor and add the code needed to embed the preview of this file into your page using an iframe. Something like:

<iframe src="https://coconino.instructure.com/files/83254551/preview " width="100%" height="480"></iframe>

You will need to replace the link I used with the link created in step 2.

Now you should have your Javascript content embedded via an iframe into your page without the need for modules.

View solution in original post

15 Replies
Stefanie
Community Team
Community Team

 @kgarcia , please refer to the Canvas HTML Editor Whitelist; any tag or attribute that does not appear on the Whitelist will be stripped out of the HTML editor, and the embed code will not work. It appears the code generated by the site contains a number of unsupported attributes. In this case, I suspect you will need to use links to the videos in order to present them in Canvas.

awilliams
Community Champion

Hey  @kgarcia 

The website is giving you some Javascript to use. Canvas strips out Javascript code from pages for various reasons. You can, however, add your own HTML file with Javascript in it. So my recommendation would be to:

1. Create a simple HTML file and paste the code from that website in that file.

2. Save this file and upload it to the Files area of your course.

3. Add this file to any module in your course.

This works great if you already use modules. If you don't, you can choose to use modules for this purpose, or follow these steps to embed a preview of that HTML file in one of your pages using an iframe. The following assumes you have done steps 1 & 2 above are using Chrome browser and Windows. Instructions may vary slightly for other browsers and OS's.

1. Go to the files area of your course and find the newly created and uploaded HTML file.

2. Modify the URL slightly. Take off everything after the file id# and add "preview"

So for me, the URL to my file was: https://coconino.instructure.com/files/83254551/download?download_frd=1

You would change this to be: https://coconino.instructure.com/files/83254551/preview

3. Go to any page and get in edit mode or create a new page

4. Switch to the HTML editor and add the code needed to embed the preview of this file into your page using an iframe. Something like:

<iframe src="https://coconino.instructure.com/files/83254551/preview " width="100%" height="480"></iframe>

You will need to replace the link I used with the link created in step 2.

Now you should have your Javascript content embedded via an iframe into your page without the need for modules.

View solution in original post

kgarcia
Community Participant

Thanks for the suggestion, Adam! I tried creating an html file, but still no luck - I got the heading of the video but no video itself (which is more than I got with any other solution so far). I am wondering if it is something with their embed code, because I also tried the code on a Wikispaces site and Wordpress blog and nothing shows up there either. But your idea will definitely come in handy for the future!

awilliams
Community Champion

Maybe it's just a problem in your HTML file. I was able to get all this working. Here's the code I used:

<html>

<head><title>Test Page</title></head>

<body>

<script src='https://www.teachingchannel.org/videos/differentiating-instruction-strategy/embed.js?width=480' type='text/javascript'></script></body>

</html>

kgarcia
Community Participant

Are you seeing the video? That code is still just giving the heading:

Screen Shot 2016-03-22 at 1.48.48 PM.png

There should be a video below the heading. That is the part that I am having trouble with.

Thank you for trying to help - very appreciated!

awilliams
Community Champion

I am assuming you're putting this in a page, not a module item. It looks like your iframe size might need to be adjusted. Here's an animated image showing the page I created with an iframe of the HTML file and an indication of where to adjust the width/height of the iframe.

HTML-File-Embed.gif

And here's the code for the page, again remember to adjust the links to your HTML file.

<p><iframe src="/courses/1325768/files/83254551/preview" width="100%" height="480"></iframe>

kgarcia
Community Participant

You are amazing! I hadn't even tried to upload the .html file into Canvas yet because the file didn't show the video when I opened in my browser, but once in Canvas it worked like a charm. Thank you for taking the time to help me out!

pete1
Community Contributor

awilliams

That is a little gem of information there! I can't say I have come across many embed videos that include JS, but it is awesome to know we can still iframe them! Thank you!!

alg813
Community Participant

Can you explain how you did this step" Modify the URL slightly. Take off everything after the file id# and add "preview""  what does that mean and how did you modify it?