HTMLのiframeとは？YouTube動画の埋め込み方を解説

💡 この記事でわかること

iframe要素とは、
👉 別のWebページを、今表示しているページの中に「窓」のように埋め込むためのタグです。

YouTubeの動画やGoogleマップ、外部サイトのフォームなどを自分のページにそのまま表示したいときによく使われます。iframeの中身は完全に別のページとして読み込まれるため、自分のページのCSSやJavaScriptの影響を受けません。

💡 画像を表示するimg要素と違い、iframe要素は「操作できるページそのもの」を埋め込める点が特徴です。

src属性に埋め込みたいページのURLを指定し、width・height属性で表示サイズを指定します。

<iframe
  src="https://example.com"
  width="600"
  height="400"
></iframe>

👉 src属性のURLは、自分のサイトと同じドメインでも、外部サイトのURLでも指定できます。ただし、埋め込み先のサイトが埋め込みを許可していない場合(セキュリティ設定でブロックしている場合)は表示されません。

YouTubeの動画ページで「共有」→「埋め込む」を選ぶと、iframeタグ入りのコードが表示されます。基本的にはそのままコピーして使えます。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/動画ID"
  title="YouTube video player"
  allowfullscreen
></iframe>

Googleマップも同様に、マップ画面から「共有」→「地図を埋め込む」でiframeコードが取得できます。店舗のアクセスページなどでよく使われます。

💡 title属性は画面には表示されませんが、スクリーンリーダーがiframeの中身を説明するために読み上げます。何を埋め込んでいるか分かる文言を付けておくとアクセシビリティの面で親切です。

width・height属性で固定サイズを指定すると、スマートフォンなど画面の狭い端末でiframeがはみ出したり、動画の比率が崩れたりすることがあります。

CSSのaspect-ratioプロパティを使うと、画面幅に合わせて縦横比を保ったままiframeのサイズを調整できます。

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

iframeは別ページをまるごと読み込むため、埋め込む数が多いとページ全体の表示が遅くなりがちです。loading属性に"lazy"を指定すると、画面に表示される直前まで読み込みを遅らせられます。

<iframe src="https://example.com" loading="lazy"></iframe>

信頼できないサイトをiframeで埋め込む場合、sandbox属性を付けることで、埋め込んだページができることを制限できます。何も値を指定しなければスクリプト実行やフォーム送信などが幅広く制限され、必要な権限だけを個別に許可していく形が基本です。

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

⚠️ sandbox属性に指定できる値や組み合わせによる挙動の違いは細かく、誤った設定は意図せずセキュリティを弱めることにもつながるため、外部サイトを埋め込む際は公式ドキュメントで各値の意味を確認しながら設定することをおすすめします。

iframe要素を使うと、YouTube動画やGoogleマップなど他のWebページを自分のページにそのまま埋め込めます。

まずはYouTubeの埋め込みコードをコピーして、自分のページに貼り付けてみましょう。