Advanced Web Design Part I

Embedded Media

Overview:

In this first part of Lab #3 we’ll revisit the three tools we explored in Lab #1 (GPC, Weebly, and DW CS3) and take them further by incorporating more sophisticated types of content.

Objectives:
  1. Be able to embed “objects” like audio, video, and Flash content
  2. Be able to embed media by using “iFrames”
The More You Know:

Embedded Media

One of the biggest secrets of including advanced content in your website is understanding the “embed” property of HTML.  Instead of simply linking to, let’s say, a video (which would open in a new window) you can “embed” that video right in your page.  Other types of media you can embed include audio clips, Flash “movies” (known as SWFs–or “swiffs”), and things like Google Maps.  You can also control various properties of embedded media such as:

  • Display size
  • Alignment on the page (left, right, center)
  • What type of controls are displayed (play, zoom, etc.)
  • Whether or not the object starts automatically
  • Whether or not the object loops (replays)

Let’s look at the two main techniques for embedding content in to web pages:

1. Embed Code

The most common way of embedding media into a web page is to use so called, “embed code”.  This code tells the browser the type of media so it can load the appropriate player (e.g. Quicktime, Flash), as well as the attributes of the player (some of which are listed above).  Here is an example of HTML for embedding a YouTube video (which loads a video using the Flash player):

Note: YouTube provides this code for you… you just have to copy and paste it into an HTML editor

<object width=”425″ height=”344″>

<param name=”movie” value=”http://www.youtube.com/v/Y3f7vs7it3w&hl=en”></param>

<embed src=”http://www.youtube.com/v/Y3f7vs7it3w&hl=en” type=”application/x-shockwave-flash”

width=”425″ height=”344″></embed>

</object>

Let’s quickly dissect what’s going on here.  You’ll notice there is an “object” tag, a “param” tag and an “embed” tag (bolded). Having all this information is slightly redundant since all the tags do essentially the same thing, but having all three necessary to satisfy all of the browsers out there.

  • The “object” tag tells the browser that something is going to be embedded in the current page
  • The “param” tag simply delivers information to the browser about what is being embedded–in this case the “name” of the content (so it can be referenced by other code on the page) and a “value” (in this case the URL of the video to be embedded).
  • The “embed” tag is what most browsers are looking for.  It includes the “src” (source) address, the “type” of application (i.e. which player to load into the browser), and the “width” and “height” of the object on the page.

It’s not likely that you will ever have to write any of this from scratch, but it will come in handy if you ever have to embed a video of your own (that’s not on YouTube) into a web page. You would simply substitute your own URL in the “param” and “embed” tags.

Looking at the embed code above, see how much you can “read” from it?:

  • What size will the video be displayed?
  • Can you tell which type of player the browser will use to play the movie?

2. iFrames

A second, and less common approach to embedding content is to insert an “iFrame” into your page.  An iFrame simply allows you to embed one HTML document inside of another.  The easiest way to understand this is by looking at an example… here is the Wikipedia website embedded in an iFrame that is 650 pixels wide by 200 pixels high:

The HTML behind the scenes looks like this:

<iframe width=”650″ height=”200″ src=”http://en.wikipedia.org/wiki/Main_Page”>

Text typed here will show up in browsers that don’t support iFrames

</iframe>

Having already dissected the more complex embed code above, this should be a little easier to understand. There is simply an “iframe” tag with width, height, and source (URL) attributes.  Additionally, any text you type between the beginning and end iFrame tags will be displayed in browsers that might not support iFrame functionality.

So let’s start by revisiting Google Sites

Google Sites allows you to embed documents created with other Google Apps as well as video and “gadgets”. Ironically, it does not allow you to embed Google Maps due to the method used to display those in the browser–iFrames.  If you do attempt to add an iFrame to your Google Page, the system will automatically remove it.  In any case, begin experimenting with embedding other types of media such as audio and video clips.

(Note: you can add media using the “Insert” menu)

Weebly

It is much easier to embed multimedia in the Weebly interface–it is a simple matter of drag-and-drop to insert videos, Google maps, and so on. To get embedded media to appear next to text (as in the image to the right) you can insert a two-column element.

Video walk through of embedding media in Weebly


Dreamweaver

Embedding multimedia in the Dreamweaver interface is similar to how you would go about it in GPC.  You have to paste your embed code into the HTML source code.

Video walk through of embedding media in Dreamweaver

Your Performance Tasks:

In the interest of time we are only asking that you complete the performance tasks using a Dreamweaver page.  If you wish, you can modify the page you created in Lab #1.  Please complete the following and upload your web page to your AFS space:

  1. Embed a Google Map
  2. Embed a YouTube video
Due Date:

All tasks for this lab must be completed by 8:00 am tomorrow, Thursday, July 1st.  Please submit the URL of your web page to the comments below (you need to be logged in to post comments).

Comments are closed.