Drivesite – creating an embeddable website in Google Drive

Leigh BlackallCurrent thinking in learning design, How to, Resources, Strategic alignment3 Comments

Here’s a Youtube playlist on how to create a website using Google Drive, from total beginner, through to most advanced.

The Drivesite concept

If you’re working in a team with varying abilities all collaborating on producing content, and/or if that content needs to feature on more than one site and you’d like to cut down on the time it takes to update those sites, then consider using Google Drive to create a site that can be embedded in another site, such as Blackboard. You or your team need only update the documents in Google Drive, and those updates will automatically take place everywhere you have embedded your “Drivesite”.

How does it work?

Embedding is a word used for taking content from one site and displaying it inside another site. Embedding is a well known feature of Youtube, and many other ‘Web2’ services. It’s not making a copy of the content, it is simply displaying the content from it’s original location in a different location. It’s a fancy way of linking.

Embedding uses the iFrame HTML tag. It’s a tag worth getting to know because you can easily reuse it to embed other forms of content, any content that has a URL or web address.


You paste that code in your website’s editor box, in HTML editing mode. This code is displaying a Youtube video at 560 pixels wide by 315 pixels high. Notice that “frameboarder is 0? This means the embedded content is set to have no boarder, but if you change the “frameboarder” to 1, you’ll create a thin 1 pixel thick black line for a boarder. And this iFrame allows a viewer to click the video to make it full screen.

Reusing iFrames

Now, you can reuse this code to embed content from other websites, or whole websites if you like. Just swap out the Youtube URL for the URL of the content you’d prefer. For example, – the Wikipedia entry for RMIT University. Sometimes, you might know the URL for that website’s mobile version, and using a mobile version of a website to embed can be a good way of reducing the graphic noise when embedding sites within sites. In Wikipedia’s case it’s (notice the m. added into the URL).

It’s important to note that iFrames don’t always work on some browsers, especially when embedding a mobile view of a site. Some browsers get confused when you’re trying to force a mobile display version of a site on a non-mobile device, like a desktop. So test your work on the common browsers.

Related Posts

Leave a Reply

3 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
paulineporcaroLeigh BlackallPauline Porcaro Recent comment authors
newest oldest most voted
Notify of
Pauline Porcaro

This is FANTASTIC Leigh thanks heaps!!!


Shall do Leigh. For now I will probably share with academics who do my Google training; I teach Google Drive and Sites for blended and flipped classroom approaches. I will certainly show this as an example of what can be done; I simply love the way it embeds into blackboard! Thanks again 🙂