HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLコードで動画を埋め込む方法｜iframeタグの使い方をわかりやすく解説

HTMLページに動画を埋め込むには、<iframe>要素を使用します。src属性には動画のURL（埋め込みリンク）を指定し、width属性とheight属性で動画プレーヤーのサイズを適切に設定しましょう。

動画の埋め込みリンクとは？

ここでいう「動画のURL」とは、動画そのものへのリンクではなく、埋め込み用リンクのことです。本記事では、例として最も利用されているYouTubeの動画を埋め込む手順を紹介します。

埋め込みリンクを取得するには、まずYouTubeで対象の動画を開き、以下の手順で操作します。

  1. 動画下部にある「共有」ボタンをクリックする
  2. 表示されたメニューから「埋め込む」を選択する
  3. 埋め込み用のHTMLコードが表示されるので、それをコピーする

これで、HTMLに貼り付けるための埋め込みリンクが取得できます。

サンプルコード

以下のコードを実行すると、HTMLコードを使って動画を埋め込む方法を実際に確認できます。上記の手順でコピーした埋め込みリンクを、HTMLドキュメント内の<iframe>タグのsrc属性に貼り付けるだけです。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Video embed</title>
    </head>
    <body>
        <p>Eclipseを学ぼう</p>
        <br />
        <iframe width="560" height="315" src="https://www.youtube.com/embed/y881t8ilMyc" frameborder="0" allowfullscreen></iframe>
    </body>
</html>

主な属性のポイント

  • width / height：プレーヤーの横幅と高さをピクセル単位で指定します。一般的なYouTubeの埋め込みサイズは「560×315」です。
  • allowfullscreen：この属性を付けることで、視聴者が全画面表示ボタンを利用できるようになります。
  • frameborder="0"：プレーヤー周囲の枠線を非表示にします。

なお、ページの表示速度を意識する場合は、<iframe>タグにloading="lazy"属性を追加すると、動画が画面に入るまで読み込みを遅延させることができ、パフォーマンス向上が期待できます。

  1. ウェブサイトにYouTube動画を埋め込む方法｜iframeの使い方をわかりやすく解説

    YouTube動画をウェブサイトに埋め込むには？ 自分のウェブサイトにYouTube動画を表示したい場合は、動画を「埋め込む（エンベッド）」必要があります。HTMLページへの埋め込みには <iframe> 要素を使用します。src属性に動画のURLを指定し、width属性とheight属性でプレーヤーのサイズを適切に設定しましょう。 埋め込みリンクの取得方法 ここで指定するURLは、動画専用の「埋め込みリンク」です。今回の例ではYouTubeの動画を埋め込みます。 埋め込みリンクを取得する手順は以下のとおりです。 埋め込みたいYouTube動画のページを開きます。 動画下にある

  2. HTMLのcodeタグとは？使い方とサンプルコードを解説

    <code>タグは、HTML文書内でソースコードを整形して表示するための要素です。たとえば、Javaなどのプログラムコードを読みやすい形でWebページ上に表示したい場合に、この<code>要素を活用します。 <code>要素で囲まれたテキストは、デフォルトで等幅フォント（モノスペースフォント）で表示されるため、コードが見やすくなります。それでは、実際の実装例を見ていきましょう。 サンプルコード <!DOCTYPE html> <html> <body> <h1>Header Files</h1> &