How to incorporate media into your blog or website

The act of incorporating actual pictures, videos or sound recordings or other media – as opposed to just links to them --  into your blog or website is known as '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.

Embedding means that your readers don't have to leave your siteOne 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.

What’s the point of embedding stuff?

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 members-only area, or a protected area such as, in a school, college or library, a virtual learning environment or an intranet.

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.

Some words of warning

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.

Secondly, even if the video is not unavailable, 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.

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 only. 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.

How to embed things

How do you go about embedding an object? In the case of YouTube and similar sites, the embed code you need will be right there on the page, as illustrated in this screenshot (it may be ‘hidden’ under a button labelled ‘Share’ or something like that). 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 or audio file, hosted on your own website, or an organisation'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, click on the Share button, select Grab the HTML/BBCode, select the size you want, then click on the code, and then copy the code to the clipboard and, finally, paste it into your blog or website.

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. Be aware that the article was written some years ago, and at least one of the instructions (those relating to Flickr) have changed since then. Still, the article should at least provide you with a useful starting point.