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

Embed Vimeo Video

Hi,

We are about to embed a few hundred of our instructional videos we have on our vimeo account across all the various courses within our Canvas environment.

These vimeo videos will be added to their relevant modules within each online course.

As there are so many videos we thought the best/fastest/cleanest option would be to use the Vimeo LTI tool as we could search from within the tool and create the link that sends the student to the video.

So the steps I took were:

1. Under a module I click on the + and choose 'External Tool'

2. I select the Vimeo tool

3. I search and find the video

4. I click on embed and then add the item

But, the problem is the formatting of the vimeo video. For some reason it is displaying the video with 100% height and roughly 60% width format (see below).

Screen Shot 2016-12-19 at 5.26.41 PM.png

I have tried also adding the videos as a link - but that produces a somewhat ugly grey frame around it...

Screen Shot 2016-12-19 at 5.39.21 PM.png

The third option that makes the video look good (how I want it) is to create a page and embed the video iframe into the page then create a link to the page in the module. It looks like this:

Screen Shot 2016-12-19 at 5.42.23 PM.png

But the process of creating a page and embedding it then adding that link into a module doesn't scale so well when looking at a a few hundred videos.

Does anyone have any tips/ideas on how I can link to our instructional vimeo videos in a scaleable way that makes them look good too?

Thanks!!

Huw

Tags (4)
6 Replies
Highlighted
Community Coach
Community Coach

h.jones@talent-100.com.au,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie

0 Kudos
Highlighted

Hi Bill,

Thanks for your thoughts and suggestions. I will work through them over the next few days and let you know how it goes!

All the best

Huw

Highlighted

If you replace the Vimeo "username" in the URL to the right, it will generate the JSON output for ALL videos for that user.  You can then paste that in the top window of this site:  https://konklone.io/json/  and then download the CSV file and import into Excel.  The first field is "id" and the second is "title".  Maybe 15 minutes to generate all the iframe embed codes for 200 videos... and then start pasting;-?

php - Vimeo - get all user video ids in array - Stack Overflow  vimeo-video-by-user.png

Highlighted

vimeo-embed-code-excel-concatenate.png

Easier than I thought.  Once you have your CSV file with data for a bunch of Vimeo videos, you can pull it into Excel.  I think you only need the "title" and "video_id" fields.  You would create two other columns.  One column would have the iframe "precode" which goes before the video_id, and then the other column would have the iframe end code (the coding after the video_id.  You create another column to hold the concatenated fields and this would put together "iframe pre code+video_id+iframe end code" and this would be the iframe embed coding for each of the videos that you would paste into each Canvas page.  *The first time I did this, I forgot a quote (") after that needed to be after the video_id, but after I added that, it worked.  I even copied all four iframe entries from the Excel spreadsheet and pasted them in a single Canvas page and all four videos displayed ready to play.  *Someone that could actually program, could make a useful little tool here.  I am not that someone;-)

Highlighted
Community Member

Totally different route:

https://vimeo.com/api/oembed.json?url=

append a video URL to the above such as: vimeo-video-url.png

When you run this, you should get a white browser page with a bunch of JSON coding at the top.  All of this is about this specific video.  Copy all of this coding and paste the generated JSON coding in the top window of this page:  https://konklone.io/json/​  and you should get a columned list of the fields included in the JSON coding.  *What is neat about this, is that there is a column for "title" and one for "html" and one for "video_id" and you could export this as a CSV file and then pull it into Excel.  The "html" column has the iframe coding to embed the video into a web page (Canvas).  You could use this as is, or delete the "title="..." coding from this field so that the video fills the embed window.

I'm not a programmer, but you could generate the JSON coding for several Vimeo videos and paste each, separately in the top window here: https://konklone.io/json/​    You get a neatly columned list of however many videos you have referenced, which can be exported as a CSV file.

You might be able to find exactly what you need by googling for it.  I found the following page that helped in the above.  php - Easy way to get Vimeo id from a vimeo url - Stack Overflow

Highlighted
Community Member

The process sounds tedious, (two monitors would make it a bit easier) but here goes:

Choose one of your videos in Vimeo and go to "Share," then "Show options" and choose the video size and any other settings that you might want, and have it generate the embed code for this video.  It would look something like this:

vimeo-embed-code.png

Copy this iframe code somewhere, where you can easily copy-n-paste it.

Is it easy to see a list of all your videos in Vimeo (like a channel in YouTube)?  If so, click on a video and copy just the video ID from the URL.  You would replace the generic ID, in yellow above, with this video ID.

Go to each course, and Modules.  Click on "Add Content Page" and click on "New Page," and name it your preferred "Page Name."  Once added to the module, click on the item name, "edit," switch to "HTML Editor" and copy-n-paste your iframe code.  Replace the video ID (highlighted in yellow above) and "Save & Publish."   http://screencast.com/t/Ly1Sk2GxvEF This part of the process takes about a minute per video.

---

Do the videos go in the same module in each course?  Is there just one video per module, or one video per course?  Could you create a dummy course with just one Module and put your default iframe embed code there, and import this course (with just the one video item in it's module) into multiple courses more quickly than you can "Add Content Page" manually to each course?

---

Could you generate the iframe embed code for all the videos and have your faculty do the page creation & pasting the code you send them?  That way you are sharing the responsibility for the process but assisting with the confusing part also.