How to embed stuff in your VLE 4


A vague title for something quite specific. Embedding is when you take media from one website or source and put it into another website. So, when you go to a website and it has a YouTube video on the page, that’s embedding. Or when you take a posterboard from a site like Padlet and put it in a blog, that’s embedding (I’ve embedded one below just so you can see).

Why is it useful to know how to do this in EAP? Well, one of the main reasons is that most VLEs such as Moodle and Blackboard normally have some kind of facility for embedding different media within them. This can be very useful when creating content in various websites that you would then like to make available to students within their VLE. To give an example of a tool I wrote about recently, Zaption lets you embed videos elsewhere, Padlet lets you embed their virtual noticeboards, Quizlet the same along with many others. Now of course you could just provide a link to the same content, but it does help make the VLE feel more integrated into the course if they are not constantly leaving it to visit other websites.

Ok, so how is it done?

Ah yes, the magic embed sauce! Now, this might get a little technical but don’t get discouraged if you feel you’re not so comfortable with technology, as long as you understand the basic principles behind embedding, you should be able to do this reasonably easily. We’ll do it as a walkthrough with some example content.

Step 1: find out if the content from a different website can be embedded in your VLE.

Let’s take an easy example: YouTube, which we know can be embedded elsewhere. When you watch a video on YouTube, underneath it you’ll find a section called Share (1). Click on that and one of the tabs will be Embed (2). The fact that it has an Embed option means it can be embedded. Cool. Generally when you are on a website, look for words such as Share or Export as likely places to find an embed code.

embed under youtube

 

Step 2: find and copy the embed code.

This is a short piece of code that you need to copy by selecting and then right-clicking and clicking copy or by pressing ctrl + c on your keyboard. Easy.

youtube embed code

Step 3: Find where to insert this in your VLE.

Ok, this is where it gets a little trickier, simply because everyone’s VLE is different. However, there are some general points which are the same which I’ll try to explain.

Now, the logical thing – you would think – is to take the code and paste into the VLE in a textbox somewhere and the content would appear. But it won’t. What you’ll see is what you can see in the pic below, basically the code but nothing else. This is done in Blackboard by the way, though I know it’s similar in Moodle.

embed in textbox

The problem is that the code isn’t text but rather, well, computer code so you need to change the textbox into something that will recognise it, namely HTML. If you don’t know what HTML is, don’t worry (I’m not sure I fully understand either) but you need to find the option in the bar above the textbox that will turn the textbox into an HTML box. If you’re lucky you’ll see a button with HTML on it, as in the picture below. Again, this is in Blackboard

html button blackboard

Or you may not. For example, in Moodle they show the HTML button as a symbol like this: <> (see pic below). So if you see something on the toolbar like that, press it.

moodle html button

An added stumbling block is that VLE designers – probably rightly – don’t want to scare teachers off with lots of nonsensical symbols so they will often hide the HTML button on a special layer that is only visible if you press another button. So, for example, within Moodle, you need to click the button below to reveal the special layer with the HTML symbol on it. Take a look at the picture below to see this.

button to open layer

Once you’ve got that, you paste in the code in the box and then click submit/update or whatever option they provide. In Blackboard you’ll get a special box open up to paste in the code, in Moodle, it will just give you an identical textbox to paste the code in. Once you’ve pasted in the code, click update (Blackboard) or Save and Display (Moodle)

html box in blackboard pasted

In Blackboard, you should then see the textbox this time, but now there’s probably going to be a coloured rectangle there (see pic below). This is normally a good thing as it means that it’s been recognised as an embed code. But you won’t actually see the YouTube video or whatever it was you embedded. It’s only when you publish or submit that it will finally be visible.

yellow embed rectangle blackboard

Step 4: changing the size of the embedded media

Now, when you look at your embedded media on the page of your VLE, you might notice that it’s either too large or too small. But that’s ok as the embed code lets you adjust the size of what you’ve embedded. To do this, go back to the text box where you inserted the code and make sure the html option is selected. In the code, there will probably be some dimensions, as in this YouTube example:

<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/yUThUBrzhbM” frameborder=“0” allowfullscreen>

You can change those dimensions to make it fit better into your page, though remember to adjust both height and width otherwise it can make it look oddly squashed or stretched. So for example, if you add 100 to the width, do something similar on the height. In some cases, the width will be marked as 100% (which just means it fills the width of the page) and the only thing you need to adjust is the height. Once you’ve done that, go back to the page and see how it looks and then go back and adjust again if necessary.

If you’re not sure what this might look like in reality, here’s a short video showing an example of how I embedded a Padlet noticeboard in Moodle and then the same in Blackboard. With the Blackboard example, I also adjusted the height of the Padlet board to make it fill more of the page.

Do you regularly embed media into your VLE? Is is something you’d be willing to try? Let me know in the comments.


Profile photo of David Read

About David Read

I work at the English Language Teaching Centre at the University of Sheffield as the Director of TEL (technology-enhanced learning). I've been an EFL/EAP teacher and teacher trainer for over 20 years and have worked in 14 different countries. Settling down is clearly an issue for me.


Leave a comment

Your email address will not be published. Required fields are marked *

4 thoughts on “How to embed stuff in your VLE

  • Profile photo of
    Heather Spence

    Thanks for this article. It’s really helpful. I’d love to know about other tools which can be embedded. Do you know if it’s possible to embed Hot Potatoes activities in VLE?

      • Heather Spence

        Thanks David. Unfortunately, my university uses Blackboard and the video only shows how to use Hot Potatoes in Moodle. I’m trying to create EAP resources that would be useful to distance learning students and would love to make it more engaging than just a load of information followed by a quiz. Any suggestions on the best way to do this would be most gratefully received!