Inserting Images in Google Sites


Transcript for Video

Embedding images and video in your Google Site allows you to develop the aesthetic appeal of your site and, in the case of an ePortfolio, it might be important documentation of your development as a student at UW Bothell.

This is a brief tutorial to show you how to embed images and video.

Let’s start with images. Let’s say you want a really great image of Mt. Rainier to adorn the homepage of your ePortfolio. You decide to check the photo aggregating site Flickr to see if there are any freely licensed or Creative Commons licensed images of Mt. Rainier.

It’s important to use images and video in your site to which you own the copyright or have a license from the copyright holder. Creative Commons is an organization that created a set of licenses that allow creators to share their work with others.

Flickr allows you to search for Creative Commons licensed images.

Go to the Search page and click Advanced Search. Type in your search terms to find the image you want and then scroll to the bottom of the page and select “Only search within Creative Commons-licensed content.” After you find your image and download it, you can embed it in your Google site.

In this case, I want the image of Mt. Rainier on the home page of my Google Site. To embed it, I go the Home page and click Edit Page in the top right corner of the screen.

Next, I click Insert and then click Image. Now, you must upload the image from your computer into google sites. Simply click Browse..., find the image you want and then click OK.

Finally, you can resize and reposition the image as you see fit. To resize, click the S M L for small, medium and large or Original for the original size. You can also align the image to the left center or right.

Finally, make sure to save your changes by clicking Save in the top right corner.

Now, let’s look at how to embed video in your google site.

Let’s say you find this really great video on youtube.

To embed this video, you need the embed code for the embed code that video hosting sites like YouTube and Vimeo provide. To get the embed code I’ll simply click embed underneath the video. Then, copy the code so you can embed it in your site. Let’s see how this works.

Now that we’ve copied the code we want to embed it in on a page. In this case, I’m going to embed it in the communication page. so I click on comm in the sidebar. Next I click edit page.

The code you are embedding is HTML, so we want to use the HTML editor to embed the code. To do this, click the HTML button. Then, right click or use “Control + V” to paste the test. Finally, click update.

As long as you are in the editing mode for the page, you will see a box like this one that reads Google Gadget. In this mode you can make adjustments to the video, like changing its alignment or, after clicking properties, adjusting the size of the video by changing the width and height in pixels.

Once your finished editing the video settings, save your changes.

If you have more questions about Google Sites or other learning technologies, check out the Learning Technologies website at or contact us at