how to use Web APIs and embedded widgets to serve maps, videos, surveys, and other content from around the Web inside your own sites
Embedding is the process of including media from other sources into your web sites.
"other documents" can include:
- media files
- images, sound, video
- other HTML (pages or snippets)
- maps, graphs, charts
- search box e.g. Google custom search
"embedding" is sometimes also called "including" or "transcluding"
For instance, you could programmatically pause and play an embedded audio clip, say, playing "hoorah!" when the user wins a game of Tic-Tac-Toe.
Or, if the user moves their location on an embedded Google Map, your app could be notified and find the city name and look up restaurants in that area on Yelp's API.
<img src=''> is the original embed
Where does the media come from?
- Usually images are served from the same web server as HTML.
- Some web sites host images or other media for free or a small cost
- images: flickr.com, imgur.com, 500px.com, etc.
- video: YouTube.com, Vimeo.com, Wistia.com, etc.
- audio: SoundCloud.com, etc.
- a CDN hosts all sorts of media for you for $$$
- Amazon AWS / CloudFront, CloudFlare, Akamai...
There are many different types of images: * svg * png * ptg * psd * jpg * and the list goes on...
Let's focus on a few of the common types of images you'll find around the web; JPGs (or JPEGs), PNGs, and SVGs.
- One of the most common image types
- relatively small file size
- limited features
- no transparency
- pixel based (raster) image type
- rectangular in shape
Note: JPGs and JPEGs are the same type of image, however when embedding them in your page you will need to make sure you are using the correct file extension otherwise your site won't be able to locate the image. Also case matters!
- Similar in size to JPGs (though often slightly larger)
- pixel based (raster) image type
- supports transparent
- rectangular in shape
Note: While PNGs can appear to be irregular in shape they are not, transparent sections will still block users from interacting with any content behind them
SVG stands for standard vector graphic
- VERY small file size
- vector based image type
- scales indefinitely
- can be irregular in shape
- Only covers the exact area it appears to cover
Lab: Embedding Images
Let's go to our trusty "example-html" directory, and add some images to make your page more engaging!
add in one image from an external source per section on your
Choose an image from your computer to include on your About page
Create a subdirectory named "images" (or 'imgs', or 'pictures', or whatever name makes sense to you)
Place a copy of your chosen image into the newly created subdirectory.
Embed that image into your About page.
Bonus Challenge: What happens when you wrap an image in an anchor tag?
<iframe> means "inline frame"
<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"> </iframe>
Beware the "same origin policy":
Refused to display 'http://www.burlingtoncodeacademy.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
- some web servers (e.g. Wordpress) set these headers on by default
- other web servers (e.g. Apache) set these headers off by default
sandboxattribute limits what the loaded page can do
Embedding HTML snippets
You can use iframes to load the same HTML onto several pages on your site.
This is often used for login boxes.
Warning: iframes can take longer to load than the rest of the page, and can eat up CPU and RAM, so don't overuse them
Lab: Embedding an iFrame
iFrames are often used to embed videos from dedicated hosts such as Vimeo or YouTube
Let's add a video to our site! Open up YouTube, and find a short video, and a long video. Leave them open in different tabs.
- Open up your "example-html" directory if it's not already open.
- Go back to the open video tabs, and click on the "share" button
- Choose the "embed" option, and copy the code for the iframe element it gives you
- Paste that code into your
- Play around with the options on the iFrame to modify the video's behavior/attributes
"In July 2017, Adobe announced that it would declare Flash to be end-of-life in 2020, and will cease support, distribution, and security updates to Flash Player."
Flash used to be the way to create web animations, but now we have better options
- Pure CSS animations
- Third party animation frameworks such as Snap SVG
HTML5 defines a standard
<video>tag when you are hosting your own video media file (on your web server or a CDN)
video hosting sites like YouTube, and Vimeo have their own rules and sample code which you should find and copy into your HTML file
Tip: you can automatically start playing the video when the page loads; to be polite you should also mute the volume, like this:
<video muted=true autoplay=true src='/videos/yelling-man.mp4'>
HTML5 also has a prebuilt
<audio> tag that you can use to embed your local audio files into your web pages. There are several key attributes for audio elements.
srcLike with all other forms of media the
srcattribut tells your tag where the actual audio file lives
autoplayAccepts a boolean value, when set to
trueit will begin playback as soon as it can
controlsAdding this attribute with no value will display playback controls to the user
loopAnother boolean attribute that repeats the audio indefinitely when set to
mutedYet another boolean attribute. It mutes your audio when set to
let audio = new Audio('audio_file.mp3'); audio.play();
<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-73.2130900,44.4749000,-73.2102500,44.4772200&layer=mapnik"> </iframe>
OpenStreetMaps defines a "bounding box" as a four-tuple: min Longitude, min Latitude, max Longitude, max Latitude.
You can find the bounding box for a given map on https://www.openstreetmap.org/ by clicking the Export button.