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

19. Embed Magician Extraordinaire


You can see the embedded video here: Sean Nufer


I got behind on my InstCon posts yesterday (busy day!), but it works out really nicely to get caught up today with two wonderful sessions from Thursday morning: snufer's session on embedded (which I will write about here), and Linda Lee's blueprint courses presentation (which I will write up later today).

For his presentation on embedding, Sean actually created a Canvas course where you can see the embedding in action: perfect! You can find the course here:

Embedding Content in Canvas 

So, for example, this is his Canvas Page with an embedded Sway:

screenshot of Sway in Canvas

Isn't that cool? So we got to see what was actually happening in the Canvas Pages and other course areas as he embedded dynamic content from tools like Sway and Padlet and on and on.

Even better: Sean edited the Pages for us right there during the session. So when the videos come out, you are going to want to watch this video to see how he did that! The idea is that he had pasted in the raw embed code in advance, and then he loaded the code so we could see the magic of the embedded content as it appeared on the Page. He walked us through the process step by step, and he repeated it a few times so that we really got a sense of how easy the process is, while also having a chance to demonstrate a wide array of different tools.

Because I am comfortable with HTML view, I always forget that it's possible to just use the embedding prompt on the default content editor to accomplish the same goal of getting widget code into the page (or discussion board or quiz or wherever). So that was a great reminder, seeing Sean show people how both options are possible, based on the editor that people prefer to use. In the editing bar, the embed option has a video icon, but it's not just for video; you can use it for all kinds of embed code:

screenshot of embed dialogue box

Sean's "anatomy of the embed code" was also really helpful. Especially for setting width and height of the iframe, knowing a little bit about the HTML code can be very helpful, and this page breaks it down really clearly:

diagram analyzing components of the embed code

For me, a big takeaway was new Padlet ideas based on how Sean is using Padlets in his courses. My favorite was the idea of a "personal Padlet" by way of a course introduction. My students do introduction posts in their blogs, but I'd like to introduce them to Padlets, and of course if they make a Padlet like this, they can link to it from their blog. Especially for students who want to share a mix of pictures and videos, Padlet is so nice. Here's Sean's About Dr. Nufer Padlet:

Dr. Nufer Padlet

I'm also thinking of making a "Pet Padlet" where everybody in all my classes can post pictures of their pets. That would be so fun to see, and it would also be a way to get students used to the idea of how Padlets work and how easy it is to create a group padlet where different people can contribute content.

Sean also had fun quiz questions with Kahoot polling. More totally fun Kahoot nicknames! (I wrote about Kahoot names here.) And there were prizes for the quiz winners! If the person who won that awesome jester hat reads this post and has a selfie wearing that hat, it would be great to include here!

You can find out more about the magic of embedding in Sean's Embedding Content in Canvas  Canvas course and also at the Community blog post he wrote about that event.

Embedding Content in Canvas, or: How I Learned to Stop Being Bland and Make My Content Amazing

For me, being able to embed dynamic content in Canvas Pages is one of my very favorite Canvas features... if you haven't tried that before, I bet you can find a tool in Sean's magic tool chest that will be fun/useful for your classes!

Tags (1)
8 Replies
Highlighted
Community Advocate
Community Advocate

Great write up, laurakgibbs!  One of my embedding tricks for people new to the code is to just grab the embed code from YouTube and simply replace the video URL with your own.  This is an example of what the embed code might look like:

<iframe width="560" height="315"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I can clean that up a bit.  Get rid of some of the options that are unique to YouTube.

<iframe width="560" height="315" ></iframe>

The URL is everything between the quotation marks after src=

<iframe width="560" height="315" ></iframe>

So where you see URL, you can put a link to padlet, sway, prezi, a blog post, etc.  You may need to adjust the width and height to optimize for the platform.  You may even consider using a percentage for width (not for height though; that will need to be a static pixel value).  If you put width="100%" then the iframe will simply stretch to fit the window.  

Highlighted

exactly!!! I am a copy-and-paste-and-tinker person with embed codes too! and also with CSS!

after enough practice it becomes automatic, but it is nice to have HTML training wheels like this. 🙂

Highlighted

Dang, I forgot that this platform scrubs out the HTML, so that post up there probably doesn't make much sense without the complete html

Sorry folks.  Here's a screengrab of what I meant to put there

html

Highlighted

I use the same approach for the trick of iframing a Canavs File containing a Twitter widget 🙂

Step 3: Insert HTML in Canvas Page: Twitter4Canvas 

screenshot of iframe snippet

Highlighted
Community Coach
Community Coach

Brilliant. I'm so pleased this got a write up laurakgibbs.

So much goodness there. And thanks to snuferor putting it all together for us to share with other teachers. Magic!

Highlighted

snufer, here is a trick to avoid Jive mangling your code. I'm providing more detail than you need in case others want to use it, too.

Open up the extended editor toolbar by clicking on the three horizontal dots.

287571_pastedImage_2.png

Then click on the More dropdown

287572_pastedImage_3.png

Choose Syntax Highlighter

287594_pastedImage_4.png

In this case, you would select HTML/XML as the language

287595_pastedImage_5.png

Then paste your code into the textbox. You can set the language after pasting the code.

If you want to paste URLs without having them turned to hyperlinks, you can leave the language as None.

This allow you to post your code, not mangle it, and even highlight certain elements. I did add some line breaks in what I typed below just to make it easier to read.

It also allows people to then copy/paste what you've supplied, which is something you don't get when it's an image.

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;controls=0&amp;showinfo=0"
  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

</iframe>

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;controls=0&amp;showinfo=0">

</iframe>

<iframe width="560" height="315" src="URL">
</iframe>
‍‍‍‍‍‍

For those who have a recent version of Snagit and want to convert a screenshot of code to actual code, it now includes OCR capability. After grabbing the image, go to Edit and choose Grab Text. Unfortunately, the OCR didn't do a very good job with that image so I had to retype it above. I apologize ahead of time if I mistyped it. Here's what Snagit came up with.

ciframe width=“560" height="325" src="https://www.youtube.com/embed/dQw4w9WgXcQ?
rel“0&arap;controls“0&amp;showinfo-0” frameborder-M0M allow-"autoplay; encrypted-media” allowfullscreenx/iframe>
•ciframe width=”560” height=''315“ src=“https://www.youtube.com/embed/dQw4w9WgXcQ? rel=08amp;controls=0&amp;showinfo=0"x/iframe>
<iframe width=“560“ height="315“ src-"URL"X/iframe>‍‍‍‍‍‍‍‍‍

One other note for those who use the Syntax Highlighter. If you need to edit the code, you need to click on the box, then click the little {;} that appears at the top to get back into the box to edit.

Highlighted
Community Advocate
Community Advocate

This is brilliant.  I've never explored the syntax highlighter. I usually just get frustrated and delete my comment when the code is mangled.  I've even tried to use html converters and put the raw elements in the comment.  

I think the new snagit is great.  They fixed quite a few bugs that I found frustrating and added a few new features.  The text grab is definitely the most exciting new thing, though it seems to be in an early stage.  

Thank you for always being incredibly thorough and helpful with your responses!

Highlighted

now I am bookmarking my own post to remember this, james@richland.edu‌: thank you!!!

Top Kudoed Authors