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

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

YouTube動画をウェブサイトに埋め込むには？

自分のウェブサイトにYouTube動画を表示したい場合は、動画を「埋め込む（エンベッド）」必要があります。HTMLページへの埋め込みには <iframe> 要素を使用します。src属性に動画のURLを指定し、width属性とheight属性でプレーヤーのサイズを適切に設定しましょう。

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

埋め込みリンクの取得方法

ここで指定するURLは、動画専用の「埋め込みリンク」です。今回の例ではYouTubeの動画を埋め込みます。

埋め込みリンクを取得する手順は以下のとおりです。

  1. 埋め込みたいYouTube動画のページを開きます。
  2. 動画下にある「共有」ボタンをクリックします。
  3. 「埋め込む」を選択すると、埋め込み用のコードが表示されます。
  4. 表示されたコードから、src属性内のURLをコピーします。

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

HTMLでの埋め込み例

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

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

埋め込みタグの各属性の意味

  • width / height：プレーヤーのサイズをピクセル数で指定します。560×315は16:9の標準的な比率です。
  • allowfullscreen：この属性を付けると、視聴者が全画面表示ボタンを利用できるようになります。
  • frameborder="0"：プレーヤー周りの枠線を非表示にし、すっきりした見た目にします。

レスポンシブ対応のコツ

スマートフォンなど画面幅の異なるデバイスでも美しく表示させたい場合は、CSSの aspect-ratio プロパティや、padding-top を活用した手法でiframeをレスポンシブ化するのがおすすめです。また、プライバシー強化モード（youtube-nocookie.com）のURLを使用すれば、訪問者の閲覧情報の追跡を抑えた埋め込みも可能になります。

  1. PowerPoint 2010にYouTube動画を埋め込む方法を徹底解説

    インターネットで常につながっている現代社会において、動画は非常に重要な役割を果たしています。視聴者の理解を深め、感情に訴えかけ、より多くの感覚に働きかけ、物事のさまざまな側面を見せることで、プレゼンテーションの目的達成に大きく貢献します。ビジネスシーンで使う本格的なPowerPointプレゼンテーションに動画を組み込めれば、そのインパクトは計り知れないものになるでしょう。 動画入りのプレゼンテーションは、テキストだけの通常のプレゼンテーションよりも、はるかに魅力的で説得力があります。この記事では、YouTube動画をPowerPointプレゼンテーションに追加する方法を、手順を追って詳しくご紹

  2. 自分の国でブロックされたYouTube動画を見る方法|VPN・URL変更・プロキシ活用術

    YouTubeはGoogleが提供する世界最大級の動画配信サービスです。世界中に視聴者を持ち、無料で利用できることから多くの人に愛用されています。しかし、一部の動画には「お住まいの国では視聴できません」といった地域制限がかかっていることがあります。その理由はさまざまで、最も多いのは動画の権利者が特定の国にのみ公開範囲を限定しているケースです。理由が何であれ、日々のYouTube視聴が妨げられるのは確かにストレスですよね。 なぜ動画がブロックされるのか? YouTubeには、一部の国で視聴が制限されている動画が存在します。主な原因は以下の2つです。 アップロード者の設定:動画の権利者は、視聴で