Better Embedding in Canvas

This blog from the Instructure Product Team is no longer considered current. While the resource still provides value to the product development timeline, it is available only as a historical reference.

dlyons
Instructure Alumni
Instructure Alumni
6
1980

There are a lot of different ways to embed content like YouTube videos into Canvas, which is great! Standards and co-existing with the open web is a big part of what makes Canvas, Canvas. Unfortunately, the three most common ways of embedding YouTube videos produce pretty different results.

 

dlyons_0-1621977447994.jpeg

1. YouTube LTI 2. YouTube embed code 3. automatic embed

Each method has pros and cons:

  1. The YouTube LTI produces the most "education friendly" embed with some of the YouTube-cruft (most ads, recommended videos, etc.) removed, but requires finding the video through the LTI.
  2. Using the embed code directly from YouTube produces an "official looking" embed, but requires the user to understand embed codes and where to get it and then where to put it.
  3. The last one, despite being the ugliest by a long shot, is actually my favorite; copy/paste a YouTube URL and BAM! auto-magical embed!

Back when I was a customer, the auto-magical embed was very flashy and cool, but the world of auto-magical embeds has evolved. We've come to expect this behavior with things like "inline previews" present in other tools we use every day, which leaves the Canvas version looking a bit dated. Have a look at these examples.

 

dlyons_1-1621977447952.jpeg

Slack 

 

dlyons_2-1621977447947.jpeg

Discord

 

dlyons_3-1621977447906.jpeg

even Twitter!

 

Slack, Discord, and their peers tend to leave the URL in the text, just like the Canvas auto-magical embed. In the context of chat, it's ok but feels clunky to have it just hanging out there in course content. Twitter intelligently removes the URL from the text (yay!) but opts for a tiny, massively cropped, "card" view for all types of embeds, including videos (boo!) 

So what might we do in Canvas to combine the cleaner version from the LTI embed with the convenience of the auto-magical embed? And could it be more services than only YouTube?

 

dlyons_4-1621977447968.jpeg

Potential neat idea #547

This click-to-play style for videos gives a clean and consistent look across most popular services, which helps keep content scannable and prevents the branding of different video streaming services from encroaching into course content. A modernized auto-magical embed also means not needing to use an LTI for each and every common video service. Even cooler would be to include things like article previews—but one step at a time here.

This is still just an idea, so of course there are details to iron out and more research to be done, but what do you think? Should Canvas have more modern-style auto-magical embeds, or are hand-crafted artisan <iframe> tags still the best way to get embeds into Canvas?

This blog from the Instructure Product Team is no longer considered current. While the resource still provides value to the product development timeline, it is available only as a historical reference.

6 Comments
dkpst5
Community Participant

I'd love to see paste-and-work embeds expanded. I could swear old RCE supported more than new RCE. (New only seems to work with YouTube, and I thought old at least supported Vimeo.)

Even if they have to click a button to bring up the "video embed LTI" and paste there instead of directly into the RCE to get the features, it'd be an improvement over both "find embed code" and "search in LTI and hope you can find it".

This will be an exciting enhancement should you find resources to move ahead with it.

BethCrook
Community Contributor

We would love to see vimeo included.  

MattHanes
Community Champion

I love this idea! The automatic embed could really use this upgrade.

akinsey
Community Contributor

Yes! Allowing for the auto-embed, no matter the video service, would be an exceptional improvement!

Steven_S
Community Champion

I use the youtube embed code because it takes so much searching to find videos I want through the LTI, and because most of the videos I use are my own unlisted videos.  It would be great to be able to add the link (not embed code) to the LTI, and have the embedded video automatically remove the ads and suggestions for other videos.  Size options (width percentage of screen for example) would be nice as well.  With these abilities in the LTI, we would not need to edit the html code to embed a video properly.

I like the proposed future look of the embeds, and the consistency proposed for other video types.  It is worth noting that the controls for CC, expanding to full screen, jumping to chapters within a video, and watching online should all be included once the video is played.  One embed tool for all such videos would be ideal, rather than needing to search individual tools.

I am wondering if videos could be added directly to a module with this tool without embedding them into a page - the intention being that the embedded video displays in an expanded item on the module page directly instead of opening a new page.  The item would not need to expand until clicked, but it would modernize the learning experience more than simply changing the video display.

DeletedUser
Not applicable

Yes, please. Cleaner, more user-friendly videos from a variety of sources would be quite welcome. And I agree with Steven_S that CC controls, full-screen expansion, etc. should be considered. Thanks for brainstorming and inviting comment. ~ Crystal