A lot of sites make their content available for use on other sites. You can add this content to your pages. This is often referred to as 'embedding' content 

Some examples of content that you could embed:

  • Videos from sites such as YouTube, Vimeo etc.
  • Photos from sites such as Flickr or Photobucket
  • Maps from sites such as Bing or Google
  • Items such as online calendars, clocks, news or weather reports

The content is kept on the other site but can be displayed on your site with the addition of a little html code. Sites will normally create this code for you (you may have noticed embed or share buttons on other sites). All you have to do is copy and paste the code into the appropriate part of your page.


Why would I embed content?

The advantages

  • If your group already has content on sites such as YouTube or Flickr, it is an easy way to add it to your SurreyCommunity.info site.
  • You can take advantage of existing content. For example, rather than draw a map yourself, you could embed one from a map website.
  • It allows you to add things to your pages that aren't provided by the SurreyCommunity.info system such as weather reports or long videos.

The disadvantages

  • The content will only appear as quickly as the other site provides it. If the other site is slow, the content will only appear slowly on yours.
  • If the other site closes down or the content is moved or deleted, it will no longer be available on your site either.
  • You may sometimes need to edit the html code used to embed the content on your page.


How to embed content from other sites

  1. Go to the site that has the content that you want to embed. Copy the html code that the site provides for embedding/adding the content. (Note: the way that each site provides the html code will differ. Most will have an embed link or button which will display the code that you need to copy).
  2. Open your page for editing.
  3. Click at the point where you want the content to appear.
  4. Click on the insert embed code button.
    Insert embed code button
  5. Paste the code that you copied into the box that appears.
  6. Click the insert button.



There are some examples below showing how different sites provide the necessary html code:

Adding a YouTube video

  1. Visit the YouTube page for the video.
  2. Click on the share button below the video. A new section will appear beneath.
  3. Click the embed button. Another new section will appear beneath.
  4. Select the options that you want to apply to the video (for example; size, whether you want suggested videos to appear at the end etc).
  5. When you have selected your options, copy the html code shown
  6. Follow step 2-6 of the general instructions above

Adding a Bing map

  1. Go to the Bing site and find the location that you want a map for.
  2. Click the share button at the top right of the map.
  3. Click the customise and preview button to set the options for your map.
  4. When you have set the options, click the generate code button
  5. Copy the code from the window that appears.
  6. Follow steps 2-6 of the general instructions above