Embedding Media in Sites

The ability to embed external content into a Google Site really lets you add more functionality and interest to your pages. Here are a few samples for you to check out, but you can add pretty much any external service that can generate embed code.

Note that many services will generate specific width and height in the code, but you can always manually edit those numbers to suit your needs. In particular, changing the width from a fixed pixel size to a more adaptable 100% width makes your page more flexible.

Streetview | Google Photos| Spark Page | Spark Video | Twitter | Soundcloud | Flipgrid| TED Talks

Infogram | Padlet | Wakelet | Google Earth Engine | Other websites

Google Streetview

To embed a Streetview 360 image, first open it on Google Maps. Find the embed code using the three dots in the top left. Be sure to switch to the Embed tab to copy the actual embed code (not just the link URL).

In Google Sites, choose the Embed option, but DO NOT paste it into the Embed Code section. Instead, paste it into the By URL section.

Then scroll to the beginning of the code text and delete the <iframe src=" at the start of it. You should then see a preview of your Streetview and you can click Insert.

Google Photos

Adding one photo to a site is easy but this method adds an entire Photo Album from your Google Photos collection. First share the selected album. Then select the Share option and click the Get Link button to create a URL for the album. Copy the URL.

Then go to step 2 on this page to find the tool you'll need to create the actual embed code - it's in the grey shaded box. Paste in your URL and click the Create Embed Code button.

On the next screen select your preferred options (the defaults are fine) and click the Copy Code to Clipboard option.

In Google Sites choose the Embed option and paste the code in the embed section. Choose Next, then Insert.

Spark Page

To embed an Adobe Spark Page, click the Share button at the top of your finished webpage and select your publish options.

In step 2, click the Embed button to create the embed code for your page and copy it.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section.

Choose Next, then Insert

Spark Video

To embed an Adobe Spark Video, first publish the finished project by clicking the Share button at the top of the project.

In step 2, click the Embed button to create the embed code for your video, then copy it.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section.

Choose Next, then Insert

Pro tip: The default embed code has the size set to width="960" height="540". When you paste into Sites change it to width=100% height="420" instead. It will fit better.

Twitter

To embed a stream from Twitter start by going to publish.twitter.com. From the dropdown list, choose what you'd like to embed. Or scroll down to see more options.

A common thing to embed would be a stream of a @user or a #hashtag, but there are many other options.

For example, type the @username of a stream you'd like to embed and choose the Embedded Timeline option. Then copy the embed code using the Copy Code button.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section.

Choose Next, then Insert

Soundcloud

Find a published audio file you wish to embed. Click the Share button below the player, then choose the Embed tab.

Select your preferred options for player type, highlight colour, size, etc, then copy the embed code that is generated.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert

Flipgrid

From the Flipgrid dashboard, chose the grid you'd like to embed and click the Share button. In the dialog box that opens, choose the Embed option.

Copy the code that gets generated. Note that this code will only work when embedded into a secure site, one with a URL starting with https://

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert

By default, the embed code sets the size to 600 x 800 pixels, but you could edit the part of the code that says width="600" height="800" if you wish to change it.

Try changing the width to 100% instead of "600"

TED Talks

While you could always just add a TED Talk from YouTube, you can also add it from the TED website (and avoid ads, etc)

Go to www.ted.com and find the TED Talk you want. Hover over it so the overlay buttons appear, and click the Share button. In the Tools section click the Embed button, and copy the code that gets generated.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert

By default, the video will scale in width up to a maximum of 854 pixels. Adjust the height of the embed box to suit.

Infographics

Get started at infogr.am and create or find an infographic of your choice.

Click the Share button at the top of the page, make sure your graphic is set to public, and choose the Embed option. Within the embed options make sure Responsive (ASync) is selected, then copy the embed code generated for you. The other defaults are fine as they are.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert.

Padlet

Create a Padlet at www.padlet.com. Save and publish it as either Public or Secret.

Click the Share button in the top right and select the Share/Export/Embed tab. Select the option to Embed in your blog or on your website, and then choose the embed style you prefer. The sample shown hers use the Full embed style. Click the Copy button to copy the code.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert

Wakelet

Create a Wakelet at www.wakelet.com and use it to curate web content into an attractive, easy to read stream. Add items from Twitter, the web, and your own images and text, to create compelling stories as media feeds. Remember to make your collection visibility to Unlisted so it will display in your Site.

After creating the collection, use the Embed button at the bottom of the page to generate the necessary embed code for that collection.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert

Google Earth Engine

Visit earthengine.google.com/timelapse and find or search for a timelapse that interest you

Click the Share button in the top left and select the Embed option. Click the Copy button to copy the code.

Then in Google Sites, choose the Embed option, and paste it into the Embed Code section. Choose Next, then Insert.

By default, the embed code sets the size to 1080 x 600 pixels, but you could change the width to fit the space on the page by changing the width to width=100% if you wish. Adjust the height to suit your needs.

Other websites

You can use the Embed option to make a third-party website appear in a window in your site.

There are a few caveats on getting this to work however...

  1. The site you are embedding must be a secure website (the URL should start with https://, not http://

  2. The site owner has to allow embedding. Some webmasters explicitly disallow embedding

Assuming you have both these things, just choose the Embed option, and enter the secure address in the By URL field. If the site allows proper embedding it will offer you a Whole Page option. Otherwise, choose Preview for a static view.

As you can see, there are many different services you can embed in a Google Site, and the basic principle is essentially the same. Generate the embed code (many online services support this) then just copy it and paste it into the Embed option in Sites. Have fun exploring all the different services you can embed!

As always, don't forget to republish your Site so your updated pages become visible to your Site's viewers. Just click the Publish button.

It's also worth noting that this same idea of copying and pasting the embed code also works in other web building tools too, such as Wordpress.

Are there other embed examples you'd like added to this page? Let me know!

Oops! Sometimes if you try and paste in a link or a code it just won't work. There are technical reasons for it. Don't lose sleep over it, just add it as a link, and go embed something else.