Better Embedding in Canvas

12 6 1,862

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.



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.









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?



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?