Activ Inspire 1.6 – Embed HTML into your Flipcharts

Back in October, when Activ Inpsire 1.6 was released there was one feature that I just couldn’t find. It said on the planet that the new version had a browser in which you could display a website. This is a feature that I find very handy when using Easiteach Next Gen and so I though this would be great addition to the Promethan tool set. It really helps with those tricky copyright issues. If you can avoid downloading content from Youtube (or any other site for that matter) and have it displayed inside your file but still stored on the orginal owners website then everyone’s happy. In essense, you’re not taking it, your doing exactly what you would do with internet explorer, firefox, chrome or any other browswer. If your IWB software has an in built browser you’re just looking at content and you’re not ‘borrowing’ it. At the time I was unable to get an answer from any of my contacts. Today however, I popped into the planet and saw a forum post about embedding HTMLinto pages of a flipchart. This wasn’t something that I’d noticed and I am wondering whether this is what the release notes were referring to as an in bedded browser? Of course, to get the content to show you’re going to need some embed code (it won’t be as easy as typing in the url – as is the case with Easiteach) but there are some excellent possibilities with a feature like that. I thought we could take a look?

Where is this Embed HTML option?

This new feature is found in the “Insert” menu.  Head to “link” and you’ll see it has been added under the option to add a link for a website. When you click this option you will be greated with an empty box in which you can paste embed code onto your flipchart.

What is Embed Code?

An example of some embed code

Embed code looks a little like this example on the right.  To most, its undecipherable. The important thing to understand is that this little piece of text is ‘calling’ a ‘function’ from someone else’s website.  In the example here we are asking “twubs.com” to find the CEGSA2012 hashtag twub and display every tweet in a box which is 250 pixels wide and 450 pixels tall… What we’re not doing is taking information and displaying without permission. We’re not even removing information from their server.  We’re asking if we can show the information on their servers on our page.   Copyright? Safe

How do I get embed code for YouTube videos then?

Head to the You Tube page that contains the video you want to display. Underneath the player you’ll see a button that says “Share”.  Clicking on this will give you a whole heap of options. Another button will display with the option to “embed”.  Click this.

Now you will find yourself with a whole heap of options but you  don’t have to make any choices if you don’t want to…

In the screen grab below you can see the highlighted embed code.  You can just copy and paste that into your “embedded html” box (see above) and you should see the video displayed. Youtube embed optionsIf you want to change the size of your video as it appears on the page you can choose any of the options that appear at the very bottom of this screen shot.  The standard size (set by YouTube is 420 x315 .  You will find that the container your video will sit in doesn’t automatically resize itself to fit the frame you just embedded into it.  You can either resize the container after adding the video or choose a larger video size from below.  The 640X480 is probably the closest to the standard size of the container but you’ll have to widen it ever so slightly to see the whole thing properly. I think, having messed around with the code for a bit, that the correct width to make it fit perfectly is 650 x 450.  You will find however, that YouTube won’t let you use the customised input box to achieve this size.  There is nothing stopping you from changing the size manually by editing the code – It’s not that scary… go on.. give it a go! As you make choices about the size, by selecting options at the bottom, the embed code will auto-populate with your new selections. When you’re happy with the size you’ve chosen, copy the code and paste it into your “embedded html” box (see above) and you should see the video displayed.

Quick Tip: If you’re concerned about what YouTube might select as “suggested videos” after the video has played then you can turn that off by unticking the “show suggested videos when video finishes” option – as shown above.

Here’s what you’ll end up with:

You can see that you still have the ability to take snapshots of the video and to choose an image from it as your start point (just as you do in the normal video player).  You also have the ability to refresh the page using the arrows.  If you want to see it in action, you can download the flipchart I created whilst writing this post here   You can’t go back and edit the embed code once you’ve hit “OK” so, if you’re not happy with what you’re seeing you’ll need to go back to “insert” and choose “embedded html” again.

Endless possibilities:

I’ve spent a lot of time here looking at how to use this with YouTube videos but, as is always the case with any technology, the possibilities here are endless.  Anything that allows you to embed code can be used in this container.  Here are a few suggestions:

Twitter Feeds on your page:

twitter embeded in Activ Inspire

Twitter Embeded in Activ Inspire

I work with adults in a tertiary environment so I’m going to experiment with the ability to have a Twitter feed displayed on my page.  That way my students can ask questions, share links and offer suggestions using a hash tag and I can come back and answer them.  The Twitter site itself will give you some code, in the form of a widget, that you can use in this way.  You can choose to show your twitter account’s recent updates, to search for a particular term (or hashtag) and see all tweets about it displayed, have all the tweets you’ve ‘favourited’ displayed or all tweets from one of your lists. You don’t need to hit the refresh to see the most recent tweets.  The widget does that for you.  You will need to resize your container to fit around your widget nicely 🙂 Alternatively, I’d suggest setting up your own Twub.

prezi embed into Inspire

Prezi embeded into the a page in Activ Inspire

Prezi’s Inside Flipcharts:

Prezi’sare a great way of displaying information.  I know, I know, you can use Activ Inspire as your presentation tool, but…. What if you want to use the web 2.0 aspects of Prezi? In the classroom with ipads or laptops, you might want students to be collaboratively working on one Prezi together.  Well, because you can embed a Prezi, you can have that slowly developing showcase of talent live, in the middle of your Flipchart. Why would you do that? For the same reason you want to place a YouTube video on your page. Pace and ease of access.  It’s all there in one file, if you pass it on to a colleague they’ll have the same resource.  Much better.

Popplets in Flipcharts:

popplet embeded in Activ Inspire

Popplet Embeded in Activ Inspire

Continuing with the Web 2.0 flavour  – Poppletscan also be embedded.  You can achieve the same results with them as you might with your Prezi!

Some issues:

Now, moving on to embedding some of the resources we’ve been collecting here for years straight into your flip chart.  Do you remember PHET Science Simulations?  Well, they also have an “embed” option….  however, this embedded code asks a browser to link of to other materials and the container doesn’t seem to like that…  I guess that’s where there may be issues. we have to remember that this embed code isn’t a browser that will allow is to explore a site within it. Of course, you also need to have a reliable internet connection – If you’re not connected to the net whilst you teach,your embedded code won’t work.  You also need to make sure that the websites and web apps you’ve chosen to use are not blocked at your site.

How the other brands are doing this:

I’ve already mentioned that Easiteach have a built in browser which you can place on any page.  You’ll find it as one of their widgets.  That means that you don’t necessarily need code, just a URL and some, to be fair may find that easier.  Notebook 11 is rumoured to have a browser that will do the same thing… at the moment however, 10.8 doesn’t have this capability.  Starboard’s software lets you search sites like Google for words you write on it’s pages but it too doesn’t have a browser or embed facility. What ‘s interesting is how adding a browser to your  IWB lesson allows you to bring in cloud computing, to connect what students might be doing on a 1:1 basis with wht you need to do as a whole class on the IWB. Of course, that will, in turn, lead to conversations which will accelerate learning and help teachers to assess progress. There really are a whole heap of pedagogical reasons to use this element of Activ Inspire 1.5.  In fact, there are so many options to explore I might disappear and keep playing! What other ways can you see this working for you?

Comments

  • Jami Stone
    Reply

    Thank you for this post! I would like to use Prezi in my flipcharts that I plan to develop. This has been very helpful for me. Thank you! Jamalee BS

  • Jami Stone
    Reply

    Thank you for this post! I would like to use Prezi in my flipcharts that I plan to develop. This has been very helpful for me. Thank you! Jamalee BS