How to embed stuff in your VLE 25


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 *

25 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!

          • http://www./

            Knish, When are you going to stop the belly aching about everything?You don't like anything. You find fault with everything and everyone too.Brighten up boy!

          • http://www./

            Hm, da mÃ¥ jeg nok oppjustere det totale vepsetallet noe, ettersom det var veeeldig mange igjen etter at du reiste hjem ogsÃ¥. Og takk for komplimentet. Tror jeg. 😉

          • auto insurance

            Hi there! I was noticing that there haven’t been any blogposts since November and the same for the FB group. Is this page still active?! I am of Masters age for the 40-45/9 groups and was hoping to find some support out here. Thanks! ~j

          • http://www./

            Thank you for another excellent article. Where else could anyone get that kind of information in such an ideal way of writing? I have a presentation next week, and I’m on the look for such info.

          • http://www./

            leading part article…What’s Choosing area we’re new whatsoever for such kind of, My husband as well as wife and recently i found this certain I’d observed The strategy absolutely important offers really helped us utilizing an outing quite a bit. I’m hoping that you ough…

          • zinssatz kredit sparkasse 2015

            I agree with Shane. I think that the only thing you need is time to know when you are ready. You’ll feel good with any decision that you make, i bet you that.I’m in a very similar situation, without the brother and the catholic family,well is not that similar.I’m not 100% sure that i’m lesbian, but probably is the “title” that better fix on me.I’m not sure if all this it’s clear, my english is pretty bad, so it’s hard to explain what i really think, i don’t have all the words in my mind, i will some day , i promise. P.S.: I noticed that i use a lot the (,) and you don’t, see? i did it again.

    • Judith

      I tried viewing your website in my cenlohple and the format does not seem to be right. Might want to check it out on WAP as well as it seems most cellular phone layouts are not working with your web site.

  • adsplex.com

    Si je peux donner un petit conseil concernant le nom de domaine : tentez d’en prendre un déjà usagé (mais pas blacklisté par Google attention). Ca vous permettra de donner déjà un peu de bouteille à votre site aux yeux de Google.

  • http://www./

    A number of organizations will give out your promotion code with their clients for very long time period, that are around to everyone your visitors no matter where the site visitors through. This can be a most common technique to obtain a low cost price. And not all of the website hosting gives you the actual coupon code, they might perhaps will not give you a way to insight the coupon code throughout the have a look at procedure.

    • Pepper

      Hello, you used to write exlctlene, but the last few posts have been kinda boring¡K I miss your great writings. Past few posts are just a little out of track! come on!

    • http://www./

      Always reminds me of red celery too, rainbow chard as well Love this recipe and I have been seeing these babies at our markets…funny with the fruit or vegetable, in the US it is classified as a fruit but elsewhere I think a vegetable? Well these pretty babies get around anyway

  • http://www./

    Hahah they were very interesting indeed! But yeah I think it is worth trying anything once 🙂 I think they would had been better if smothered in cheessseee!!and oohh I want to hear about this cockroach hot choc! Where was it from and was it a whole cockroach? I've had a fly in a hot choc before! Not pleasant haha.Oh I think on average ppl eat 2.5 cockroaches a year or something?

  • hauskauf kreditrechner kfw impressum

    comentou em 10 de janeiro de 2011 às 00:32. Oi Júlia.Seus vídeos são sempre otêmos! Me divirto e aprendo horrores.Gostei muito do último, porém fiquei morrendo de pena dos seus pincéis com tanta esfregação. + tem que ser assim né? hahahaha.Bom a minha dúvida é sobre o BRUSH CLEANSER da MAC. Comprei ele no free-shop, porém ainda não usei. Tô com medo da dosagem. Você me dar uma luz de como utilizar ele??Muito obrigada! Feliz ano-novo p vc e p todos do Petisco! 🙂

  • http://www.accessgamecoins.win/

    * حظائر التكاثرفي محمية الشومري حديقة صغيرة مخصصة لتكاثر انواع من الحيوانات بهدف زيادة أعدادها، ومشاهدة هذه الحيوانات الوليدة في حظائر التكاثر تشكل متعة جميلة للكبار والأطفال وطلبة المدارس والرحلات الجماعية لهذا المرفق.