HTML First Steps - Lesson 7 - Object Tag. Embedding Video from Youtube.

Quite often you need to embed a YouTube video into your blog. In this lesson, we’ll go over the tags and attributes used to do that. Let’s start by going to YouTube and copying the embed code for a video.

The resulting code looks like this:

<object style="height: 390px; width: 640px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

As you may have noticed, the <object> tag is used to embed the video. It includes a style attribute, which is a universal attribute for all tags where CSS styles are written. We’ll dive into CSS later, but for now, note that CSS styles in the style attribute are separated by semicolons. Here, height and width control the size of the player. If we change them like this:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

The size of the YouTube player will be reduced by half. But we also need to change the width and height of the <embed> tag:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="320" height="180">
</object>

The <object> tag includes several <param> tags, which define properties of the embedded object. Here are the most common:

• movie – specifies that this is a video file, with the URL in the value attribute.
• allowFullScreen – allows fullscreen playback. Set value="false" to disable fullscreen.
• allowScriptAccess – enables interaction with the player’s API via JavaScript.