7 methods for embedding multimedia into your blog or website

This past weekend my students diligently worked on their blog posts for the 2015 Student Blogging Challenge. I created an exemplar for them so that they could see exactly how their blog post should look like (which included embedding multimedia), and gave them the weekend to work on it.

One of the most exciting components of the blog post was Activity 3, which involves including either a Thinglink or multimedia presentation using apps such as an iMovie, Tellagami, or Explain Everything. I was eager to learn more about my students and share their awesomeness with the world!

Over the weekend many of my students ran into challenges regarding embedding media. After about the tenth email I realized that I should’ve anticipated that hurdle, however I (incorrectly) assumed that they could figure it out. How silly of me!

Therefore, I wanted to share some tricks for embedding images, files, presentations, and/or multimedia.

Disclaimer: I am not a coder. I repeat, I am not a coder. I know some basic tricks for embedding, however if you want me to trick out your code and make it look pretty, I will refer you to Google.

What is “embedding?”

To “embed” means to place a an object from one website into another site, such as a website or blog. For example, to embed a video, you would use a special HTML code that includes a link supplied from the original hosting website (a website where your video is hanging out), and paste that into the site you plan on putting it into.

Basics of HTML

HTML stands for Hypertext Markup Language. It’s a system used to customize font, graphics, color, and hyperlinks on websites. Sometimes you’ll run across it on various websites, but for the most part, we just see the pretty results from all of the code.

Here’s what the code for embedding an image looks like:

<img src=“url“ alt=“some_text“>

Here’s what the code for the link to my blog looks like:

<a href=”http://mrslepre.com”>Mrs. Lepre</a>

If I put that HTML code into the text editor, it will look like this on my blog:

Mrs. Lepre

The words “Mrs. Lepre” are hyperlinked so that when you click on it, it takes you to my blog.

Text editor? What’s that?

On many blogs and sites, you have both a visual and text editor.

The visual editor looks like a word processor, like Microsoft Words, Pages, or Google Docs. You have a toolbar that allows you to change the font, size, color, etc. That toolbar automatically changes the code for you so that you don’t have to think about it. So essentially, in the text editor, what you see is what you get.

Here’s what my blog post looks like in the visual editor (notice the “Visual” tab in the upper right-hand corner):

The text editor has fewer options for customization in the toolbar, but that’s because it allows you to use your own HTML code. It’s for users who are comfortable with code or want to embed items.

Here’s what my blog post looks like in the text editor (notice the “Text” tab in the upper right-hand corner):

When you have the HTML code to embed an item, you will need to use the text editor.  Typically I use the text editor to embed the code, and then switch to the visual editor to see what it looks like.

Why do I need the code? Can’t I just upload what I need?

Well, yes, sometimes you can. However depending on what you’re adding that media to, there may be file size limits and storage space.  This is a problem if you’re trying to upload an iMovie that is 50 MB or larger.

Also, uploading a video can make it load slower. That’s because your site has to do all the work of hosting the video, which can cause pauses and other issues during playback. Imagine getting a heavy item at a store that you have to carry to the register. You can set it down on a cart and let that do all of the work, or you can carry it yourself, which will put more strain on you. When you embed the video, the work of hosting it is put on the website that you’re getting the code from, which puts less stress on your site.

If you can embed the HTML code for it, then do it. A little bit of effort goes a long way in ensuring that your media will come out the way you want it.

With that in mind, here are some of most common ways that I embed material in my website or blog.

 1. Embedding multimedia: hosting on Google Drive

If you save your videos in Google Drive, you need to take several steps to get the right HTML code. This works especially well for screencasts that I’ve done as tech tutorials, as well as iMovies.

I want to mention that after extensive trial and error, as well as research, I discovered that I CANNOT do this with videos saved to Dropbox.

2. Embedding multimedia: a Youtube video

There’s so much amazing information on Youtube that I love to use in my class. That being said, many videos are blocked in my institution due to some of the nature of the videos. If that’s not the case with you, here’s how to embed them.

3. Embedding multimedia: adding a Thinglink

I really like using Thinglink for educational purposes. I love to embed Thinglinks into posts since it looks much more appealing.

You have to admit that adding:

A link:

https://www.thinglink.com/scene/698375224785108992

Or even hyperlinking the Thinglink

Doesn’t compare to actually embedding it:

Here’s a video on how to do that:

4. Embedding multimedia: attaching a Prezi

Prezis are a wonderful presentation tool that many of my students enjoy using.

5. Embedding multimedia: feature a Tweet

Yes, you CAN embed that amazing tweet that you just have to share!

6. Embedding multimedia: play a Google Slides presentation

I absolutely LOVE how you can create presentations on Google Slides and save them as a slide deck. Genius!

 7. Embedding multimedia: disseminate a Google Form

Many of the staff at my site have found Google Forms to be so useful. Instead of sending a link to your form, you can just embed it directly into your website or blog.