【HTML】iframe で外部ページや動画を埋め込む方法｜YouTube・Google マップ・sandbox を解説

YouTube の動画や Google マップ、別のページの一部を自分のサイトに表示したいとき、その入り口になるのが iframe 要素です。iframe は、いまのページの中に「もう1つのブラウザ画面」を埋め込むための要素で、外部のコンテンツをまるごと取り込めます。この記事では iframe の基本的な書き方から、src・title・loading・allow・sandbox といった属性の意味、YouTube や Google マップの埋め込み、CSS でレスポンシブにする方法までを、初心者にも分かるように解説します。

iframe 要素とは

iframe（インラインフレーム）は、表示中のページの中に別の HTML ページを埋め込む要素です。埋め込まれた中身は独立した1つのページとして扱われ、その内部のリンクやスクロールは、外側のページとは切り離して動きます。動画サービスや地図サービスが「埋め込みコード」として配布しているものは、ほとんどがこの iframe です。

埋め込む先のページは、自分のサイト内のファイルでも、まったく別のドメインの外部ページでも構いません。ただし外部ページを埋め込むときは、相手側が埋め込みを許可しているかどうかが関わってきます。これについては記事の後半で説明します。

基本の使い方

もっとも基本的な書き方は、src 属性に表示したいページの URL を指定するだけです。あわせて width と height で表示領域の大きさを決めます。

<!-- 外部ページを幅600px・高さ400pxで埋め込む -->
<iframe src="https://example.com/" width="600" height="400" title="example.com のページ"></iframe>

iframe は開始タグと終了タグで囲んで書きます。タグの間には何も書かなくて構いませんが、title 属性は付けておくのが基本です。title は埋め込んだ中身が何なのかを示すラベルで、画面読み上げソフトを使う人が「ここに何が埋め込まれているか」を理解する手がかりになります。アクセシビリティの観点から、iframe には title を必ず付けることが推奨されています。

width と height は数値だけを書くとピクセル単位になります。これらを省略すると、多くのブラウザで横 300px・高さ 150px の既定サイズで表示されます。意図したサイズにするため、基本的には指定しておきましょう。

よく使う属性

iframe には表示や挙動を制御するための属性がいくつもあります。代表的なものを下の表にまとめました。

loading=”lazy” で読み込みを遅らせる

loading="lazy" を付けると、その iframe が画面に近づくまで読み込みを後回しにできます。ページの下のほうにある地図や動画は、最初の表示時には見えていないことが多いので、遅延読み込みにしておくとページの初期表示が軽くなります。

<!-- 画面に近づいてから読み込む -->
<iframe src="https://example.com/" width="600" height="400"
        title="example.com のページ" loading="lazy"></iframe>

allow と allowfullscreen で機能を許可する

allow 属性は、埋め込んだコンテンツに対してどの機能を使ってよいかを指定します。たとえば allow="fullscreen" なら全画面表示、allow="autoplay" なら自動再生を許可します。複数の機能を許可したいときはセミコロンで区切って並べます。動画サービスの埋め込みコードに allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" のような長い指定が入っているのはこのためです。

allowfullscreen は、埋め込んだ動画などを全画面で表示してよいかを示す属性です。allow="fullscreen" と同じ役割を持つ古くからの書き方で、いまも YouTube などの埋め込みコードに含まれています。両方が書かれていても問題ありません。

YouTube 動画を埋め込む

YouTube の動画は、再生ページの「共有」→「埋め込む」から iframe のコードを取得できます。受け取るコードはおおよそ次のような形です。src の URL に含まれる文字列が動画の ID です。

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/動画ID"
        title="YouTube video player"
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>

ポイントは、通常の動画 URL（watch?v=...）ではなく、埋め込み専用の https://www.youtube.com/embed/ から始まる URL を使うことです。自分で書き換えるよりも、YouTube が配布する埋め込みコードをそのまま貼り付けるのが確実です。

Google マップを埋め込む

Google マップも、地図画面の「共有」→「地図を埋め込む」から iframe のコードを取得できます。こちらも自分で URL を組み立てず、配布されるコードをそのまま使います。

<iframe src="https://www.google.com/maps/embed?pb=..."
        width="600" height="450"
        title="店舗の地図"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"></iframe>

referrerpolicy は、地図を読み込むときに「どのページから呼ばれたか」という参照元情報をどこまで送るかを決める属性です。Google マップの埋め込みコードには no-referrer-when-downgrade が指定されていることが多く、これは HTTPS から HTTP への降格時だけ参照元を送らない、という設定です。基本的には配布コードのままにしておけば問題ありません。

レスポンシブに対応させる

width と height を固定値で指定すると、スマートフォンのように画面が狭い端末では、iframe がはみ出したり余白だらけになったりします。動画や地図のように縦横比を保ったまま伸縮させたいときは、CSS で工夫します。よく使われるのが、外側の要素の padding-top に縦横比のパーセントを指定する方法です。

<div class="video-wrap">
  <iframe src="https://www.youtube.com/embed/動画ID"
          title="YouTube video player" allowfullscreen></iframe>
</div>

.video-wrap {
  position: relative;
  width: 100%;
  /* 高さを幅の56.25%（16:9）にして縦横比を固定する */
  padding-top: 56.25%;
}

/* iframe を外側いっぱいに広げる */
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

padding-top はパーセントで指定すると「親要素の幅に対する割合」になります。16:9 の動画なら高さは幅の 9 ÷ 16 = 0.5625、つまり 56.25% です。これで外側の箱の縦横比が固定され、その中に iframe を position: absolute で重ねて広げることで、幅に応じて高さが自動で決まります。

近年は aspect-ratio プロパティを使うと、より簡潔に書けます。外側の要素を用意せず、iframe に直接 aspect-ratio: 16 / 9; width: 100%; height: auto; を指定するだけで縦横比が保たれます。対応ブラウザも広がっているため、新しく書くならこちらが手軽です。

sandbox でセキュリティ制限をかける

素性のよく分からない外部ページを埋め込むときは、sandbox 属性で動作を制限できます。sandbox を値なしで付けると、スクリプトの実行・フォーム送信・別ウィンドウを開く操作などが一括で禁止され、もっとも厳しい状態になります。そこから「許可トークン」を書き足して、必要な機能だけを部分的に解放します。

<!-- スクリプトの実行だけを許可し、ほかは制限する -->
<iframe src="https://example.com/widget"
        title="外部ウィジェット"
        sandbox="allow-scripts"></iframe>

注意したいのは、allow-scripts と allow-same-origin を両方とも許可すると、埋め込み先のスクリプトが sandbox 属性そのものを取り除けてしまい、制限の意味が薄れる場合があることです。信頼できないページを埋め込むときは、この2つを同時に付けないのが安全です。

外部ページが埋め込めないとき

相手が埋め込みを拒否している

URL は正しいのに iframe の中が真っ白になる、という現象はよく起こります。これは、埋め込まれる側のサイトが「他サイトのフレーム内で表示されること」を拒否しているのが原因です。サイト運営者は X-Frame-Options や、レスポンスヘッダーの Content-Security-Policy にある frame-ancestors という指示で、自分のページが iframe に埋め込まれないよう制限できます。クリックジャッキングと呼ばれる攻撃を防ぐためで、Google や各種 SNS のトップページなどが代表例です。

この制限は埋め込む側からは解除できません。表示できないサイトは、そのサイトが用意している正式な埋め込みコード（YouTube や Google マップのようなもの）があればそれを使い、なければリンクで誘導する、という方針に切り替えましょう。ブラウザの開発者ツールのコンソールに、フレーム表示を拒否した旨のメッセージが出ていれば、これが原因だと判断できます。

HTTPS のページに HTTP のコンテンツを埋め込んでいる

自分のページが https:// で配信されているのに、iframe の src が http:// で始まっていると、ブラウザがその読み込みをブロックすることがあります。これは「混在コンテンツ（mixed content）」と呼ばれ、安全な接続のページに安全でない接続のコンテンツが混ざることを防ぐための仕組みです。

対処はシンプルで、src の URL を https:// に変えるだけです。埋め込み先が HTTPS に対応していれば、これで解決します。対応していない場合は、その時点で安全に埋め込む手段がないため、別の方法を検討することになります。

まとめ

iframe 要素を使えば、外部のページや動画・地図を自分のサイトに埋め込めます。要点を振り返ります。

• src に URL、width・height でサイズを指定し、title でアクセシビリティに配慮する
• loading="lazy" で読み込みを遅らせ、allow・allowfullscreen で動画などの機能を許可する
• YouTube や Google マップは、配布される埋め込みコードをそのまま使う
• レスポンシブにするには padding-top の比率指定か aspect-ratio を使う
• 信頼できない外部ページには sandbox で制限をかける
• 真っ白になるときは相手の埋め込み拒否や混在コンテンツを疑う

まずは src と title、サイズを指定したシンプルな iframe から始め、用途に応じて属性やレスポンシブ対応を足していくのがおすすめです。

参考ページ

• <iframe>: インラインフレーム要素 – HTML | MDN
• iframe の sandbox 属性 – HTML | MDN
• X-Frame-Options – HTTP | MDN
• aspect-ratio – CSS: カスケーディングスタイルシート | MDN