Embedding Media

Embedding is the process of including media from other sources into your web sites.

"other documents" can include:

"embedding" is sometimes also called "including" or "transcluding"

Interactive Embedding

Sometimes you can use JavaScript to interact with the embedded file or app as if it were another User Interface element on your page!

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.

This lesson focuses on static embedding: displaying media and allowing the user to interact with it directly. The Interactive Embedding lesson focuses on interactive embedding: using JavaScript to pass messages between your page's scripts and the embedded media.

Embedding Images

<img src=''> is the original embed

MDN: img

Where does the media come from?

Image Types

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.


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!


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

Lab: Embedding Images

Let's go to our trusty "example-html" directory, and add some images to make your page more engaging!

Embedding IFrames

<iframe> means "inline frame"

<iframe id="inlineFrameExample"
    title="Inline Frame Example"

More Information

MDN IFrame Reference

Malware Vectors

Beware the "same origin policy":

Refused to display 'http://www.burlingtoncodeacademy.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Beware giving foreign JavaScript access to your page contents and user-input data

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.

Embedding Flash

R I P Flash

"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."

Modern Animations

Flash used to be the way to create web animations, but now we have better options

Embedding Video

HTML5 defines a standard <video> tag

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'>

Embedding Audio

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.

Playing Audio from JavaScript

Playing sounds directly from JavaScript is pretty easy:

let audio = new Audio('audio_file.mp3');

Embedding Maps

<iframe id="inlineFrameExample"
    title="Inline Frame Example"

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.

Scripting Maps

It is possible to use JavaScript to interact with an embedded map. See the client-side coding lesson on embedding