HTML の第一歩 — レッスン 7 — object タグ。YouTube 動画の挿入。

自分のブログに YouTube の動画を挿入する必要がよくあります。このレッスンでは、どのタグとその属性が使用されるかを見ていきます。まずは YouTube にアクセスして動画のコードをコピーしましょう。

次のようなコードが得られました。

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

おそらくもう気づいたと思いますが、動画の挿入には <object> タグが使用されます。また、object タグには style 属性があります。style 属性はすべてのタグに共通のユニバーサル属性で、その中にタグの CSS スタイルを書きます。CSS が何かは後で説明しますが、今はこれで十分です。属性内の CSS スタイルはセミコロンで区切って書きます。ここには height と width、つまり高さと幅があります。これらのパラメータを変更できます。例えば、次のように設定すると:

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

YouTube プレーヤーのサイズは半分になります。その場合、embed タグの width と height 属性で指定されている高さと幅も変更する必要があります。

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

また、object タグには <param> タグが含まれています。param タグには、挿入されたオブジェクトのプロパティが記述されます。挿入されたパラメータの中には:

movie — これが動画クリップであることを示し、その後の value 属性にこのクリップの URL が入ります。

allowFullScreen — 全画面モードへの切り替えを許可します。value="false" を設定すると、全画面モードに切り替えられなくなります。

allowScriptAccess — プレーヤーの API を扱うために必要です。