Web 2.0 For Rookies: Embedding

In this series I'm looking at Web 2.0 for the benefit of the complete novice. If you would like to get your colleagues or, conceivably, even some students up to speed, these articles should help. At least, I hope they will provide a good starting point. In this one, we look at the idea of 'embedding'.

You've almost certainly already seen examples of embedding. Go to any website where there's a video clip on the page, and you're looking at it in action. In other words, embedding is simply the act of inserting code into a web page or blog that puts the object right there on the page. This 'object' might be a video, a presentation, a document, a picture -- just about anything, in fact.

One thing that's important to bear in mind is that when you embed an object all you are really doing is inserting a link to it -- but a special type of link which puts the object itself, rather than the usual sort of blue underlined hyperlink, in front of people.

So, a reasonable question would be: why bother? After all, how much effort is it for people just to click on a link to take you to the object itself? There are several reasons why you might want to use embedding rather than plain old-fashioned linking.

Firstly, why encourage people to leave your site when you don't have to? Go into a department store and you'll notice that there is, say, a Costa coffee bar: not a sign telling you where the nearest Costa is on the high street, but Costa itself. Embedding is the same sort of idea.

Secondly, in some cases you might not want people to go off-site because you have an enclosed space like a Virtual Learning Environment (VLE) or Learning Platform.

Thirdly, if you have embedded more than one object in the page, it would become tedious for the reader to have to keep going somewhere else, and then coming pack to the original page.

And fourthly, as implied by the previous point, placing the object where the reader is, rather than expecting the reader to go to where the object is, provides a service to the reader -- a bit like meals on wheels.

A couple of things to bear in mind about embedding are as follows.

Firstly, because the embed code is really just another kind of link, if the object itself is moved or deleted, or if access to it is blocked, then embedding it won't do you any good. For example, if YouTube is banned in your school, there's no point in trying to embed a YouTube video.

Secondly, if YouTube, say, is not banned in your school, you might still want to place some sort of disclaimer on the page to the effect that you can't guarantee that the object will always be available. Teachers need to understand this, because if they have prepared a lesson based on watching an embedded video, and that video is no longer there when they start their lesson, they need to have something else to fall back on (which is good practice anyway).

Thirdly, although embedding an object is not the same as downloading it and then uploading it onto your own website, you should still be aware of copyright issues. Some sites specifically state that you're allowed to use their materials for educational purposes. With those that don't, you may wish to seek permission. Where this is impractical, my own suggestion would be to make sure you include citation information if this isn't obvious. For example, a video hosted on YouTube will have the YouTube logo embedded in it, but a photo from Flickr won't have any such logo, so a proper citation is in order -- assuming the owner has allowed people to use his or her photos in the first place.

Example of a video embed codeHow do you go about embedding an object? In the case of YouTube or TeacherTube, the embed code you need will be right there on the page, as illustrated in this screenshot. You select the code by clicking in it and pressing Ctrl-A, and then copy it to the clipboard by pressing Ctrl-C. Then, in your blog editor, find a button labelled 'Source' or 'HTML', click on it, and paste the code there by pressing Ctrl -V. If you paste it into the normal editing window, all people will see is the embed code. (Note that some blogging platforms, such as Squarespace, which is what I use, have a facility which enables you to paste the code into a special window without having to find the Source area.)

What if it's your own video, hosted on your own website, or the school's server, or your Local Authority's server, that you wish to embed? Where do you get the embed code from? The best site I've come across for this is the Video Codemaker site.

To embed a picture from Flickr, go to the size of the photo you want to use (by clicking on the label 'All sizes' above the picture), and copy the code under the heading 'Copy and paste this HTML into your webpage:'.

But why stop at video? The article, How to embed almost anything in your website is very good, with instructions on how to embed files of all descriptions in your website or blog. The only thing I would say is ignore the instructions for embedding video: they're far too unwieldy. Use the Video Codemaker site instead.

Finally, don't forget to check out the other articles in this series by looking in the alphabetical index for 'Web 2.0 for Rookies...'.