はじめに
HTML の<embed>タグを使うと、画像、ビデオ、その他のウェブページなど、さまざまな種類のコンテンツを自分たちのウェブページに含めることができます。この実験では、HTML の<embed>タグを使って YouTube ビデオをウェブページに追加します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックすると、ポート 8080 でウェブサービスを実行できます。その後、Web 8080タブを更新してウェブページをプレビューできます。
HTML ドキュメント構造
index.htmlという名前の新しいファイルを作成します。
index.htmlファイルを作成したら、ヘッド要素とボディ要素を持つ HTML ドキュメントの基本構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Embed Tag Lab</title>
</head>
<body></body>
</html>
HTML のタグを使ってビデオを追加する
ウェブページにビデオを追加するには、YouTube の埋め込みコードを使う必要があります。
YouTube の任意のビデオに移動します。
ビデオの下にある「共有」ボタンをクリックし、次に「埋め込み」ボタンをクリックします。これにより、「ビデオを埋め込む」ウィンドウが開きます。
「ビデオを埋め込む」ウィンドウに表示される HTML コードをコピーします。
コードを
<body>要素内のindex.htmlファイルに貼り付けます。<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
ビデオの幅と高さを設定する
サイズの問題を回避するために、ビデオの幅と高さを設定することが重要です。
<embed>タグにheightとwidth属性を追加します。width属性はビデオの幅を定義し、height属性はその高さを設定します。<embed src="https://www.youtube.com/embed/TWfph3iNC-k" width="560" height="315" />
index.htmlファイルを保存し、ウェブブラウザで開いてビデオが正常に追加されたことを確認します。
非対応ブラウザ用の代替手段を追加する
すべてのブラウザが<embed>タグをサポートしているわけではありません。非対応ブラウザを持つユーザーに対してもウェブページが正常に機能するようにするため、代替手段を追加することができます。
埋め込むコンテンツの種類と埋め込むリソースの URL を指定するパラメータ付きで
<object>タグを追加します。<object type="text/html" data="https://www.youtube.com/embed/TWfph3iNC-k" width="560" height="315" > <p> Your browser does not support the HTML5 Video element. Please upgrade to a modern browser. </p> </object>
index.htmlファイルを保存し、<embed>タグをサポートしていないブラウザ（たとえば Internet Explorer）で開きます。代替手段が機能することを確認します。
まとめ
おめでとうございます！HTML の<embed>タグを使ってウェブページにビデオを追加する方法をうまく学びました。ブラウザのサポートを確認し、必要に応じて代替手段を使うことを忘れないでください。
