Lessons menu
CSS - intermediate - Lesson nr. 13
Including/embeding outside content to our website

What this lesson is about?
In this lesson we will learn how to add embeddable content from other websites to ours. We may find a lot of possibilities on the Internet to ease our work, saving time on programing, designing and security.


New HTML tag:

<iframe> - this tag is used to include in a page content from another page. We will not create it ourselves, on the pages which provide embeddable content there is mostly a possibility to copy code to embed.

Example using Google Maps:

If you want to share a location on your webpage, you can draw a map, but it is not necessary. You can use Google Maps as visualized on the picture above. There are other possibilities to use personalized maps with Google.

Example embedding YouTube video:

If you need to embed a video on your website, you can copy it to your server and run it from there, but that can mean increased traffic and cost, or you can upload to a video sharing channel and embed the video in your webpage. That means the video runs on another server.

Example embedding Facebook like button:


If you want to embed a social media plugin, you should search on their page for a way to generate code to embed in your page. There are more ways to do this, we choose the <iframe> again to include a like button.

We need to add a link to the page we want others to share or like, so I copied the link of the LIFT project.


  • The previous examples can be solved without registering to a website, but there are more possibilities by registering. You can download program codes and personalized codes to access data, statistics and resources from the pages you use.
  • There are possibilities to use external form. Using HTML forms you need to use database and programs to process the data, but using an external, embedded form has the advantage that your data gets filled in a table and downloaded in a spreadsheet. This needs registering on a site (like Google).
  • You can set a Custom Search Engine to add a search bar to your website – to search the content of your website. You may need to create a Google account and copy your website to a server.
1. Open the tips.html and add a Google Map above the footer (after the last paragraph inside the content div). Add a second level heading with the text Where I live, then search for London and embed the map.
View the result
2. Open the toplangs.html and embed a video from the code.org YouTube channel. The video should appear beside the SVG graphic included:
  • Resize the video if does not fit, changing the width attributes value;
View the result
3. Add a Like button and a second level heading with the text Like our main project, Code n' Social in the index.html, above the gallery. Hitting the button the user should like the Code n’ Social Facebook page (https://www.facebook.com/Codensocial/). Also, change the height to 40 in the iframe.
View the result
1. What is a disadvantage of embedding a YouTube video to your webpage?
2. Which is not an existing embeddable Facebook icon?
3. Which property cannot be used with the <iframe> tag?
4. Why add Custom Search Engine to your webpage?
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept